文本溢出：省略号在Internet Explorer中的换行符后不起作用

我的text-overflow: ellipsis在用换行符隔开文本时无法在Internet Explorer中工作。文本溢出：省略号在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>

来源

2016-01-13 ijb109

它使用的是这种方式在任何浏览器中，对于这种行为，预是必需的。至少，仍然没有在IE中工作。这是一个错误？不知道W3C关于期望的行为的说法... https://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-props –

随着text-overflow，省略号可应用于单个文本行。

下面的CSS要求必须满足：

必须有一个width
必须white-space: nowrap
必须overflow比visible
其他值必须display: block或inline-block

它会出现，IE实际上是正确渲染省略号：第二行不应该有省略号。这使得它成为多行，违反了nowrap的意图，并且省略号应该失败。

Chrome和Firefox在换行符后呈现省略号这一事实可能是他们自己实现的实现差异。

一种解决方法是创建新段落而不是换行符。

有关多行文本省略号考虑这些选项：

来源

2016-01-13 18:47:28

一行是实际的行为应该是预计，但变体和调整正在途中https://www.w3.org/wiki/Text-overflow_middle_cropping –

感谢您的解释。我将文本分成多个段落，并工作。 – ijb109

文本溢出：省略号在Internet Explorer中的换行符后不起作用

回答

相关问题