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

回答1:

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.

回答2:

Could you just use two different <p> tags?

回答3:

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>

来源：https://stackoverflow.com/questions/25084785/set-a-line-break-in-justified-text-and-still-have-it-justify

标签

html

css

internet-explorer

justify