Set a line break in justified text, and still have it justify

GentlePurpleRain picture GentlePurpleRain · Aug 1, 2014 · Viewed 7.9k times · Source

I have a paragraph of text that is justified. At a certain point in the text, I need the next line to begin with a certain word, so I need to break the text, but I still want the "broken" line justified (stretched to the end of the line), even if that mean large ugly spaces between words.

Is there any way to accomplish this?

I am using CSS 2.0 (no access to 3.0), and this only needs to work in Internet Explorer 7+.

HTML:

<p>
  This is the paragraph that I want to justify.  I want a line
  break after the period, but I still want this line justified.<br />
  Is there any way to do that?
</p>

CSS:

p { text-align:justify; width:200px; }

JSFiddle: Justified text

Answer

Jukka K. Korpela picture Jukka K. Korpela · Aug 1, 2014

A forced line break, with <br>, tends to leave the line before it left-aligned, unjustified. There does not seem to be any specific statement on this in CSS specs, it’s just how browsers do things. But things are different if you cause a line break by forcing the rest of the paragraph to remain on one line:

p { text-align:justify; width:200px; }
<p>
      This is the paragraph that I want to justify.  I want a line
      break after the period, but I still want this line justified.
      <span style="white-space: nowrap">Is there any way to do that?</span>
    </p>

However, if the rest of the paragraph does not fit on one line, it will overflow past the width you have set.