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>
Use this instead of justify
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 unimplemented1 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: theletter-spacing
property. Settingletter-spacing: 0.5ex
should do the job.1 I cannot find any better source, sorry for W3Schools link. QuirksMode has only a test.
Another thing that breaks your example is that
h1
andh2
have margins. You can setmargin: 0
, or better usediv
s, because the texts have just presentational meaning. I’ll replaceh1
withdiv.first
andh2
withdiv.second
.The image is better displayed as background of the
#logo_text
; you just need to reserve enough space for it in thepadding-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 havedisplay: inline-block
. You can always wrap it in anotherdiv
if you don’t like how inline blocks interact with outside elements.Without CSS3 properties, there is a
nasty hackwork-around using empty:after
pseudo-element (called::after
in CSS3) withdisplay: inline-block
andwidth: 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:
.second. Here
height: 1em`.word-spacing: -1em
.For both the trick with
::after
and its improvement usingword-spacing
, full credit goes to Vjeux:Later I found this related question: Justify the last line of a div?