Justify the last line of a div?

Question

I don't think the "why?" of this question is important...but what I need to do is to text-align:justify the last line of text from a DIV. Normally, the last line (or the first if there are no other lines, which is the current case) of a div isn't justified, but aligned left. I know it might not make sense at all, but I absolutely need the last line to be justified!

Hershberger

Despite you indicating the Why is not important, I'm still curious about it. – Clavius

Let's say I'm working with divs that "for some reason" (there is one pretty good reason) can only have one line....and I want to justify them. – Hershberger

Update: I could try to use word-spacing and JavaScript to achieve this... – Hershberger

Related: Image to the left from a justified text – Restful

This is a little late, but try text-align-last: justify;. – Chinkiang

Answer 1

Here's a cross-browser method that works in IE6+

It combines text-align-last: justify; which is supported by IE and a variation of the :after pseudo-content method. It includes a fix to remove extra space added after one line text elements.

CSS:

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

If you have one line of text, use this to prevent the blank line the above CSS will cause

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

More details: http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

Syrinx

This is an awesome trick. I have to admit, I feel a tad hacky using it, but such a clever hack, it definitely is in my arsenal. PS - I ran into another scenario today (the same day I found this) where this came in handy. I'm using a dl and it turns out empty dds break formatting (having a 0 height) and sure enough, a hidden . did the trick. – Tramp

This is NOT a cross-browser solution. It works only in Gecko based browsers and in IE. – Dilettantism

This will add an extra empty line below each p, what can be done about that? – Beefy

@KristofferNolgren Reducing the margin-bottom of the p (to 0, perhaps) should work well enough in most cases. – Salvia

@KristofferNolgren you can add a margin-top: -1em; to the following p. reducing the bottom margin of the justified p does nothing for me (Chrome 34). – Hobbledehoy

Answer 2

This is the cleanest hack I could come up with/find. Your mileage may vary.

I tested my example in IE8, Firefox, Chrome, Opera, Safari.

IE7 does not implement the :after pseudo-class, so it won't work there.

If you need IE7 support, it would probably work to stick the " ___" inside an extraneous span at the end of the div (use JS?).

Live Demo (see code)

CSS:

div {
    width: 618px;        
    text-align: justify
}
div:after {
    content: " __________________________________________________________";
    line-height: 0;
    visibility: hidden
}

HTML:

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>

Unfortunately, it seems to make the div a line taller than it needs to be.

Fulfil

Awesome thinking! Unfortunately, it creates too many bugs for what I'm doing, but still thumbs up for such hard work! I'll stick to JS and word-spacing, that's the best I can do – Hershberger

If you come up with something reusable using JS and word-spacing, you should post it here. I couldn't find a better solution on the internets than the one I posted here. – Fulfil

Answer 3

This method worked for me:

This trick is called "Ben Justification" ^*

Well, it's not quite all with css, you need to add a little extra to the end of the line. The markup for the heading above is...

<h1 id="banner">
    How to justify a single line of text with css<span> &nbsp;</span>
</h1>

The little addition at the end of the line triggers the justification of the line by starting a new line. The additional content (<span> &nbsp;</span>) is forced onto a new line because the space is made 1000px wide (with word-spacing) and   is treated like a word. The additional line does not display because the fontsize is set to 0px.

Update, 23-Jan-11: I've just updated the markup to include a space after the   within the span and setting the font size to 1px for the span: this is needed for IE8. Thanks to Mamoun Gadir for pointing out IE's problems.

The css for the heading above is...

h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}

h1#banner span {
font-size: 1px ;
word-spacing: 1000px;
}

^* Unless evidence demonstrates that this technique has been published before, I hereby name this technique "Ben Justification" and declare it free for all to use.

Ben Clay, Jan 2010.

Source: http://www.evolutioncomputing.co.uk/technical-1001.html

Brodeur

Answer 4

CSS3 offers a solution for this in the form of text-align-last, see http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last

Clavius

This works only when the text in a div is totally justified. «This property describes how the last line of a block or a line right before a forced line break is aligned when ‘text-align’ is set to ‘justify’». This is useful when you want the last line aligned left or right, and the whole text justified. – Everetteeverglade

Reading the question, I see "Normally, the last line (or the first if there are no other lines, which is the current case) of a div isn't justified, but aligned left." - since normally the entire div is aligned left, I made the assumption here the reader meant that normally, when justifying a DIV, the last line is aligned left instead of being justified. In that case, text-align-last seems to be the least invasive tool to use. – Clavius

Unfortunately this is not supported in Safari. – Lx

Answer 5

There is a CSS3 IE 5.5/6 (thanks, CSS3.com, NOT!) property called text-justify that can do what you want with:

text-justify: distribute-all-lines;

Not sure about browser support. What a ripoff.

Grand

Apparently CSS3.com needs to label their properties better! – Grand

Answer 6

Let's say I'm working with divs that "for some reason" (there is one pretty good reason) can only have one line....and I want to justify them.

Why don't you use text-align: justify;? It does justify every line. Even if there is just one line.

Edit: I think you are looking for this, as scragz said. Anyway, this works only in IE 5.5 and IE 6.

Everetteeverglade

Answer 7

I had an issue where some of the above answers worked, but added a visible new line at the bottom - which was unacceptable, because the box had a background color. I fixed the justification with the code below:

jQuery:

$(".justify").each(function(index, element) {
    var original_height = $(this).height();
    $(this).append("<span style='display: inline-block;visibility: hidden;width:100%;'></span>");
    $(this).height(original_height);
});

HTML:

<div class="justify" style="width:100px; background-color:#CCC">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Chock

Answer 8

When the !DOCTYPE is HTML5, Kristin's and Jacqui's solutions cause an extra newline, which is hard to remove. If it bothers you (like me), here's yet another idea:

<div style="display: flex;">
  Lorem <span style="flex:1;"></span>
  ipsum <span style="flex:1;"></span>
  dolor <span style="flex:1;"></span>
  sit...
</div>

It has another drawbacks: works for single-line text only, and requires modification of the content as shown above, which isn't always feasible/practical. But there are some situations when this is not problem (like in my case). It can even be useful to have control over the positions where the extra space will be inserted. Styles are inline for brevity only, of course. I tested it with recent FFox/IE only.

Welltimed

Answer 9

If the closing div tag is followed by a line break or if the div tag makes use of an equivalent bottom padding/margin, then you can simply replace this with a concluding invisible line of non-breaking spaces such as this:

<div>This last line is now for all intents and purposes justified &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

While this may not be the prettiest solution, it's probably the safest cross-browser solution as it doesn't rely on any kind of non-standard tweak. Just make sure that there's enough "nbsp" characters to always cause a line break while keeping within a safe margin from the maximum allowed on a single line.

As for why one would want this, well, I can give my own rationale to whom it may be of interest; there are situations where you want to divide up a continuous text block or text paragraph in order to insert images, tables or as in my case custom footnotes right before a page break. If you do that, then you want the last line right before the break to be justified as the text will resume right after the arbitrary break. In my case, the footnotes are of variable length so I have to enter them manually and therefore I also need to manually divide the text block and manually force alignment of the last line before the break. I'm not aware of any automatized solution that's also cross-browser compatible, but adding a bunch of non-breaking spaces does the job for me at least...

Gile