Question

我有一段合理的文字。在文本中的某一点，我需要下一行以某个单词开头，所以我需要打破文本，但我仍然希望“破损”行合理（延伸到行尾），即使这意味着文字之间的空间很大。

有没有办法实现这个目标？

我正在使用CSS 2.0（无法访问3.0），这只需要在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 1

强制换行符<br>，在左对齐，不合理之前往往会离开该行。在CSS规范中似乎没有任何具体的声明，它只是浏览器的工作方式。但是如果通过强制段落的其余部分保持在一行来导致换行，则情况会有所不同：

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>

但是，如果段落的其余部分不适合一行，它将溢出超出您设置的宽度。

Answer 2

对于任何有兴趣的人。看来text-align-last: justify可以胜任。参见https://www.w3schools.com/cssref/css3_pr_text-align-last.asp

Answer 3

你能使用两个不同的<p>标签吗？

Answer 4

使用jQuery和css脚本搜索换行符br的标签，然后用span元素替换br标签并关闭p标签。我知道使用outerHTML而不是DOM搞乱纯文本可能会导致问题。这个解决方案的变体我使用了几次没有问题，并希望这对其他人有用。

这里也是jsFiddle链接：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>

在对齐的文本中设置换行符，并且仍然有理由

4 个答案: