css - 带有 标签的多行省略号仅在 IE11/Edge 中将省略号添加到第一行

Question

在 Chrome 和 Firefox 中，两行都在末尾显示省略号。然而在 IE11/Edge 中只有第一行有省略号，第二行只是截断。有没有办法让 IE11/Edge 像 Chrome/Firefox 一样工作？

body {
  font-family: 'Arial';
}

div.wrapped-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
}

<div class="wrapped-text">
This is a test of wrapped<br>
text that should overflow
</div>

Answer 1

对于处于相同情况的任何人，我发现使它起作用的唯一方法是稍微更改 HTML，以便 div 中的每一行都包含在它自己的 div 中——那些子 div 将 css 设置为添加省略号。

body {
  font-family: 'Arial';
}

div.wrapped-text {
  width: 100px;
}
div.wrapped-text > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="wrapped-text">
  <div>This is a test of wrapped</div>
  <div>text that should overflow</div>
</div>