Question

当文本被换行符分隔时，我遇到text-overflow: ellipsis无法在Internet Explorer中工作的问题。

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

Answer 1

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

必须满足以下CSS要求：

必须有width
必须有white-space: nowrap
必须overflow的值不是visible
必须有display: block或inline-block

看起来IE实际上正在正确地渲染省略号：第二行不应该有省略号。这使得多行有效，违反了nowrap的意图，并且省略号应该失败。

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

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

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

text-overflow：在Internet Explorer中换行后，省略号不起作用

1 个答案: