Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 339
GentlePurpleRain Avatar asked Feb 12 '23 08:02

GentlePurpleRain


1 Answers

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.

like image 120
Jukka K. Korpela Avatar answered Feb 15 '23 00:02

Jukka K. Korpela