Question

我有以下代码：

＆＃13;

.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%;
}

＆＃13;

<!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>

＆＃13;

请不要问我为什么要这样做。： - ）

我的问题是：在FF和Chrome中，这会产生两行填充<p>空格的文本。但IE在“jus-”之前打破了第一行并将其放入一个单独的行。没有连字符的行将按预期显示，它似乎是最后混淆了IE的连字符。

以下是Internet Explorer的截图：

Screenshot from IE

这是Firefox的截图：

Screenshot from FF

我有什么想法可以防止IE破坏线路？旧帖子的建议答案不能解决连字符的问题。

Answer 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>

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

1 个答案: