当最后一个单词后跟连字符时，对齐单行会中断 IE 中最后一个单词之前的行答案

【问题标题】：Justifying a single line breaks the line before the last word in IE when last word is followed by a hyphen当最后一个单词后跟连字符时，对齐单行会中断 IE 中最后一个单词之前的行
【发布时间】：2015-10-24 15:40:07
【问题描述】：

我有以下代码：

.clJustify {
  width: 400px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid red;
  text-align: justify;
}
.clJustify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Justify Test</title>
</head>

<body>
  <p class="clJustify">This is text that should be jus-</p>
  <p class="clJustify">tified and also hyphenated.</p>
</body>

</html>

请不要问我为什么要这样做。 :-)

我的问题是：在 FF 和 Chrome 中，这会导致两行文本填满 <p> 的空间。但是 IE 打破了“jus-”之前的第一行并将其放入单独的行中。没有连字符的行将按预期显示，似乎是末尾的连字符使 IE 感到困惑。

这是 Internet Explorer 的屏幕截图：

这是来自 Firefox 的屏幕截图：

有什么办法可以防止 IE 中断吗？对旧帖子的建议答案并未解决 连字符 的问题。

【问题讨论】：

好吧，我不是问你为什么要这样做，而是你只想这样做吗？
如果有其他方法可以证明单行的合理性，我将不胜感激。
对齐单行？我有个主意。试试text-align-last，用sn-p给你写一个答案。
也许这有帮助：stackoverflow.com/questions/4771304/…
您可以尝试使用不同类型的破折号（U+2010 到 U+2015），看看它们是否有相同的怪癖...

标签： html css internet-explorer justify hyphen

【解决方案1】：

试试 text-align-last 和 -ms-text-align-last，这在 IE 中有效：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Justify Test</title>
    <style type="text/css">
      .clJustify{
        width: 400px;
        height: 1.5em;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid red;
        text-align: justify;
        -ms-text-align-last: justify;
        text-align-last: justify;
      }
      .clJustify:after{
        content: " ";
        display: inline-block;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <p class="clJustify">This is text that should be jus-<br>&nbsp;</p>
    <p class="clJustify">tified and also hyphenated.</p>
  </body>
</html>

【讨论】：

较新的浏览器几乎不支持 text-align-last。
@Xufox 同意，现在我使用了-ms-text-align-last，并且 OP 已经使用了:after 修复。
好吧，谢谢 Praveen，这在 IE 中有效，但在 FF 或 Chrome 中无效。你能解释一下<br>&nbsp;吗？
@MartinAuer 坦率地说，我不知道。之前刚试过，效果很好。抱歉，我无法解释为什么。但这是因为，它迫使它不是最后一行。去掉br可能是什么？
@MartinAuer IE 具体修复？对你起作用吗？你愿意接受我的回答吗？