在两端对齐的文本中设置换行符，并且仍然对齐答案

【问题标题】：Set a line break in justified text, and still have it justify在两端对齐的文本中设置换行符，并且仍然对齐
【发布时间】：2014-09-24 22:13:31
【问题描述】：

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

有没有办法做到这一点？

我使用的是 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

【问题讨论】：

标签： html css internet-explorer justify

【解决方案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>

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

【讨论】：

如果我只在 span 中换行几个字，我可以按照我的意愿，用常规换行和对齐方式继续下一行：JSFiddle

【解决方案2】：

对于任何感兴趣的人。似乎text-align-last: justify 完成了这项工作。见https://www.w3schools.com/cssref/css3_pr_text-align-last.asp

【讨论】：

该问题明确指出 CSS 3 不可用。
我知道。这就是我所说的“对于任何感兴趣的人”。也许我不够清楚。只是最近在寻找答案的过程中来到这个帖子，所以我想分享我的发现来帮助别人......
另外，这似乎总是证明最后一行是合理的，不仅是那些被br 标签破坏的行，还有一些需要考虑的因素。

【解决方案3】：

使用 jQuery 和 css 脚本在 p 标签中搜索换行符 br，然后将 br 标签替换为 span 元素并关闭 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】：

您可以只使用两个不同的<p> 标签。

【讨论】：

如果我这样做，第一个<p> 标签的最后一行将不合理，这就是我想要做的。