Question

我正在尝试应用文本溢出：省略号，该省略号在特定div中包含br标签。在Chrome浏览器中，它工作正常，在IE＆Edge浏览器中，省略号（...）不显示。
标记将被动态添加。 Please see the issue screenshot in EDGE & IE

<!DOCTYPE html>
<html>
<head>
<style> 


div.b {
    white-space: nowrap; 
    width: 150px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}


</style>
</head>
<body>


<h2>text-overflow: ellipsis:</h2>
<div class="b"> <b>Hello world!Hello world!Hello world!Hello world!</b> <br /> second line text: Helloworld!Helloworld!Hello world!Hello world!</div>



</body>
</html>

Answer 1

我们为什么不更改结构，它也可以在IE中使用

div.b{
  width: 150px; 
  border: 1px solid #000000;
}
div.b b, div.b p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
  display:block;
  margin: 0;
}

<h2>text-overflow: ellipsis:</h2>
<div class="b"> 
  <b>
    Hello world!Hello world!Hello world!Hello world!
  </b> 
  <p>
    second line text: Helloworld!Helloworld!Hello world!Hello world!
  </p>
</div>

Answer 2

有关其他人的信息：
我有一种奇怪的情况，就是text-overflow: ellipsis; 无法在Microsoft Edge 42.17134.1.0 上运行。

详细信息：如果我在开发人员工具中切换属性text-overflow，则文本将重新呈现并正确截断；如果我切换到另一页然后又切换回去，则文本的截断将不起作用。

解决方案：检查了元素上的css样式后，我发现display: block下的:before:after引起了问题，删除然后截断将再次达到预期的效果。

如果我们有br标签，则IE和Edge浏览器中不会显示文本溢出省略号点

2 个答案: