在使用Chrome浏览器的情况下,以下CSS可以工作并显示省略号(红色突出显示),其结果如下所示:

铬:

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


结果:

html5 - 文本溢出:省略号属性不适用于IE11浏览器-LMLPHP

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

html5 - 文本溢出:省略号属性不适用于IE11浏览器-LMLPHP

html5 - 文本溢出:省略号属性不适用于IE11浏览器-LMLPHP

谁能帮我解决此问题?

最佳答案

经过测试,似乎可以正常工作: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;将打破铬中的省略号。

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

html5 - 文本溢出:省略号属性不适用于IE11浏览器-LMLPHP

10-05 20:58
查看更多