Image to the left from a justified text

问题

I’m trying to align a logo’s image and text. I cannot justify the second line to the width of the block. Here is the expected result:

I tried this:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500); 
h1 {
    line-height:30px;
    font-size:30px;
    background:#eee;
    color: #333333;
    }

h2 {
    line-height:10px;
    font-size:12px;
    background:#eee;
    text-transform: uppercase;
    color:  #434343;
    }

img#logo {
    margin-right:10px;
    margin-top: 0px;
    float:left;
    }
#logo_text{
    font-family: 'Ubuntu', sans-serif;
    width: 230px; 
    }
#logo_text h2{
    text-align: justify;
    }

<img id="logo" src="http://placehold.it/52x36">
<div id="logo_text">
    <h1>Build Home</h1>
    <h2>Industrial theme</h2>
</div>

回答1:

There is the text-align-last property in CSS3 that has not gained wide adoption in the browsers yet. Therefore you need to set prefixed versions of the property, too, and pray everything works.

Also your image has not only force-justified last line, but changed kerning, too. CSS3 has text-justify: distribute to evenly distribute the space from the end of the line among both the inter-word and inter-letter space. Sadly, it’s almost unimplemented¹ as of today (March 2015). Only MSIE implements it. For the time being, you need to resort to the usual method of influencing the kerning: the letter-spacing property. Setting letter-spacing: 0.5ex should do the job.

^{¹ I cannot find any better source, sorry for W3Schools link. QuirksMode has only a test.}

Another thing that breaks your example is that h1 and h2 have margins. You can set margin: 0, or better use divs, because the texts have just presentational meaning. I’ll replace h1 with div.first and h2 with div.second.

The image is better displayed as background of the #logo_text; you just need to reserve enough space for it in the padding-left of #logo_text. Since #logo_text now contains the image, I’ll rename it to #logo.

And finally, to get rid of the fragile fixed width setting, both the #logo and .first should have display: inline-block. You can always wrap it in another div if you don’t like how inline blocks interact with outside elements.

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500); 
#logo {
    font-family: 'Ubuntu', sans-serif;
    padding-left: 62px;
    background: url(http://placehold.it/52x36) 0 50% no-repeat;
    }
#logo, #logo .first {
    display: inline-block;
    }
#logo .first {
    line-height: 30px;
    font-size: 30px;
    background: #eee;
    color: #333333;
    }
#logo .second {
    margin: 0;
    line-height: 10px;
    font-size: 12px;
    background: #eee;
    text-transform: uppercase;
    color: #434343;
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    -ms-text-align-last: justify;
    -o-text-align-last: justify;
    text-align-last: justify;
    -moz-text-justify: distribute;
    -webkit-text-justify: distribute;
    -ms-text-justify: distribute;
    -o-text-justify: distribute;
    text-justify: distribute;
    letter-spacing: 0.5ex; /* HACK: Remove once text-justify is supported. */
    }
.outline {
    margin-top: 1em;
    }
.outline * {
    outline: 1px dotted;
    }
.outline #logo .first {
    outline-color: red;
    }
.outline #logo .second {
    outline-color: green;
    }
.outline #logo {
    outline-color: blue;
    }
.outline #logo .first::after, .outline #logo .second::after {
    outline: 1px dotted #cad;
    }

<div id="logo">
    <div class="first">Build Home</div>
    <div class="second">Industrial theme</div>
</div>

<div class="outline">
<div id="logo">
    <div class="first">Build Home</div>
    <div class="second">Industrial theme</div>
</div>
</div>

Without CSS3 properties, there is a ~~nasty hack~~ work-around using empty :after pseudo-element (called ::after in CSS3) with display: inline-block and width: 100%. It forms a new line in the corresponding element and thus lest the originally last line be justified.

The problem is that you get an empty line at the end of the corresponding element. When applying this hack to paragraphs of real text, it doesn’t matter that much, because you usually use margin to create the space anyway. Here, it is a deal-breaker.

There are at least two ways to work-around it:

Set absolute height to .second. Hereheight: 1em`.
Set negative word spacing of at least size of a space. Here word-spacing: -1em.

For both the trick with ::after and its improvement using word-spacing, full credit goes to Vjeux:

http://blog.vjeux.com/2011/css/css-one-line-justify.html
http://blog.vjeux.com/2012/css/css-displaying-a-justified-line-of-text.html

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500); 
#logo {
    font-family: 'Ubuntu', sans-serif;
    padding-left: 62px;
    background: url(http://placehold.it/52x36) 0 50% no-repeat;
    }
#logo, #logo .first {
    display: inline-block;
    }
#logo .first {
    line-height: 30px;
    font-size: 30px;
    background: #eee;
    color: #333333;
    }
#logo .second {
    text-align: justify;
    line-height: 10px;
    font-size: 12px;
    background: #eee;
    text-transform: uppercase;
    color: #434343;
    letter-spacing: 0.5ex; /* HACK: Remove once text-justify is supported. */
    }
#logo .second::after {
    content: "";
    display: inline-block;
    width: 100%;
    }
.with_height #logo .second {
    height: 1em;
    }
.with_word_spacing #logo .second {
    word-spacing: -1em;
    }
.outline {
    margin-top: 1em;
    }
.outline * {
    outline: 1px dotted;
    }
.outline #logo .first {
    outline-color: red;
    }
.outline #logo .second {
    outline-color: green;
    }
.outline #logo {
    outline-color: blue;
    }
.outline #logo .first::after, .outline #logo .second::after {
    outline: 1px dotted #cad;
    }

<div id="logo">
    <div class="first">Build Home</div>
    <div class="second">Industrial theme</div>
</div>
<div id="logo" class="with_height">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
<div id="logo" class="with_word_spacing">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>

<div class="outline">
<div id="logo" class="with_height">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
<div id="logo" class="with_height">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
<div id="logo" class="with_word_spacing">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
</div>

Later I found this related question: Justify the last line of a div?

回答2:

Use this instead of justify

#logo_text h2{
  text-align: center;
 }
 #logo_text h1{
  padding: 3px 0px;
 }

来源：https://stackoverflow.com/questions/29194594/image-to-the-left-from-a-justified-text

标签

html

css

justify