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

Question

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

score 7 · Accepted Answer · edited Mar 11 '18 at 17:10

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.

If I only wrap a few words in the span, I can continue the next line with regular wrapping and justification, as I wanted: [JSFiddle](http://jsfiddle.net/ck73u/) — GentlePurpleRain, Aug 01 '14 at 19:55

score 3 · Answer 2 · answered Jul 23 '20 at 20:09

3

For anybody interested. It seems that text-align-last: justify does the job. See https://www.w3schools.com/cssref/css3_pr_text-align-last.asp

answered Jul 23 '20 at 20:09

Ramblin Wreck

47
10

The question specifically states that CSS 3 is not available. – GentlePurpleRain Jul 24 '20 at 12:09
1

I know. That's what I meant by "For anybody interested". Maybe I wasn't clear enough. Just that I came to this post recently as I was looking for the answer, so I wanted to share what I found to help others... – Ramblin Wreck Jul 26 '20 at 16:11
Also, this seems to always justify the last line, not only ones broken by the `br` tag, something to take into consideration. – Cristik Apr 12 '21 at 05:45

score 0 · Answer 3 · answered Aug 01 '14 at 23:33

Using jQuery and css script search p tags for line break br and then replace br tags with span elements and close p tag. I know that messing up with plain text using outerHTML instead DOM can cause problems. Variants of this solution I used couple of times without problems and hope that will be usefull to someone else.

Here is jsFiddle link too : http://jsfiddle.net/QrqG6/2/

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        p span {display: inline-block;line-height: 0;overflow: hidden;width: 100%;}
        p { text-align:justify; width:200px; line-height:20px; margin: 0; padding:0;}
    </style>
    <script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $.each($('p'), function(key, pasus){
            var line = pasus.outerHTML.split(/<br[^>]*>/gi);
            if (!$("body").hasClass("ie7"))
                var lineHeight = $(this).css('line-height');
            else
                var lineHeight = 0;
            this.outerHTML=line.join("<span> </span></p><p style='margin-top: -"+lineHeight+"' >");
        });
    });
    </script>
</head>
<!--[if !lte IE 7]><body><![endif]-->
<!--[if lte IE 7]><body class="ie7"> <![endif]-->
    <p>
        This is the paragraph that I want to justify.  I want a line     <br>break after the period, but I still want this line justified.<br>
        Is there any way to do that?
    </p>

    <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>
</body>
</html>

score -2 · Answer 4 · edited Jul 28 '20 at 01:00

-2

You can just use two different <p> tags.

edited Jul 28 '20 at 01:00

Bhargav Rao

50,140
28
121
140

answered Aug 01 '14 at 16:42

Luke

2,053
1
18
25

If I do that, the last line of the first `
` tag won't be justified, which is what I'm trying to do.
– GentlePurpleRain Aug 01 '14 at 17:05

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

4 Answers4

Linked

Related