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
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.