我有一个问题，当有文本被换行符分隔时，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>最佳答案
与 text-overflow , 省略号可以应用于单行文本。
必须满足以下 CSS 要求:
- 必须有一个
宽度 - 必须有
white-space: nowrap - 必须有
overflow，其值不是visible - 必须有
display: block或inline-block
看起来 IE 实际上正确地呈现了省略号:第二行不应该有省略号。这使得它实际上是多行的，违反了 nowrap 的意图>，省略号应该失败。
Chrome 和 Firefox 在换行符后呈现省略号的事实可能是他们自己采取的实现差异。
一种解决方法是创建新段落而不是换行符。
对于多行文本上的省略号，请考虑以下选项:
关于html - 文本溢出 : ellipsis doesn't work after line break in Internet Explorer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34774088/