html - 文本溢出 : ellipsis doesn't work after line break in Internet Explorer

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 要求:

• 必须有一个宽度
• 必须有 white-space: nowrap
• 必须有 overflow，其值不是 visible
• 必须有 display: block 或 inline-block

看起来 IE 实际上正确地呈现了省略号:第二行不应该有省略号。这使得它实际上是多行的，违反了 nowrap 的意图>，省略号应该失败。

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

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

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

• jQuery dotdotdot...
• Line Clampin’ (Truncating Multiple Line Text)
• CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS