text-overflow: ellipsis在Internet Explorer中换行后不起作用

Question

text-overflow: ellipsis在Internet Explorer中换行后不起作用

3

我在Internet Explorer中使用text-overflow: ellipsis时遇到了问题，当有经过换行符分隔的文本时无法正常工作。

在Firefox和Chrome中，两行文本都被省略号截断。在Internet Explorer中，第一行被省略号截断，第二行只是右侧被截断。

下面是我的代码:

.text-wrapper {
  border: solid 1px #C2C2C2;
  padding:10px;
}
.text-wrapper p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="text-wrapper" style="width:250px;">

    <p>
      This line overflows and gets an ellipsis in any browser. 
      <br/>
      This line overflows and gets an ellipsis in any browser except IE.
    </p>

</div>

- ijb109

以前在任何浏览器中都是这样的，为了实现这种行为，需要使用pre。但是，在IE中仍然无法正常工作。这是一个错误吗？不确定W3C对预期行为有何说法... https://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-props - G-Cyrillus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

使用 text-overflow，可以将省略号应用于单行文本。

必须满足以下 CSS 要求：

必须有 width 属性
必须有 white-space: nowrap 属性
必须有 overflow 属性，但不能为 visible
必须有 display: block 或 inline-block 属性

看起来 IE 实际上正确地呈现了省略号：第二行不应该有省略号。这使其在效果上是多行的，违反了 nowrap 的意图，因此省略号应该失败。

Chrome 和 Firefox 在换行后呈现省略号可能是他们自己采取的实现差异。

一个解决方法是创建新的段落而不是换行。

对于多行文本的省略号，请考虑以下选项：