html - 文本溢出 : ellipsis property not working for IE11 browser

Question

在 Chrome 浏览器的情况下，以下 css 有效并显示省略号(以红色突出显示)，结果如下所示:

Chrome :

position: relative;
display: -webkit-box;
max-height: 136px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

结果:

但在 IE 11 的情况下，它不显示省略号:

谁能帮我解决这个问题？

Answer 1

经过测试，它似乎工作正常:https://jsbin.com/zaxasamoxa/1/edit

h1 {
  width: 100px;
  position: relative;
  display: block;
  display: -webkit-box;
  max-height: 136px;
  -webkit-line-clamp: 4px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<h1>absdfmksdlfmdlskflsdkfmlsdkmflskdmf</h1>

检查您的 CSS 是否有其他规则可能会把事情搞砸。

请注意 display: -webkit-box; 将打破 chrome 中的省略号。

https://caniuse.com/#feat=text-overflow 也证实了支持