我不知道为什么这个简单的CSS不能工作…

.app a { 高度:18 px; 宽度:140 px; 填充:0; 溢出:隐藏; 位置:相对; Margin: 0 5px 0 5px; text-align:中心; 文字修饰:没有; 文本溢出:省略; 空白:nowrap;} 颜色:# 000; } < div class = "应用" > <a href="">Test Test Test Test Test Test Test</a> . < / div >

应该在第四次“测试”前后切断


当前回答

还请确保,直接的封闭元素具有固定的宽度,并且希望应用省略号的跨度具有display:block

其他回答

我一直有这个问题,我想要一个解决方案,可以很容易地与动态宽度工作。解决方案使用css网格。 下面是代码的样子:

.parent { 显示:网格; Grid-template-columns: auto 1fr; } .dynamic-width-child { 空白:nowrap;} 文本溢出:省略; 溢出:隐藏; } .fixed-width-child { 空白:nowrap;} } < div class = "父" > < div class = " dynamic-width-child”> iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh; lshd flhsd; lhfaaaaaaaaaaaaaaaaaaaa < / div > < div class = " fixed-width-child”>为什么?zed < / div > < / div >

锚,跨度…标签默认是内联元素,如果内联元素宽度属性不起作用。因此,您必须将元素转换为内联块或块级元素

还要确保在IE10及以下版本中,换行设置为正常。

下面引用的标准将此属性的行为定义为依赖于“text-wrap”属性的设置。但是,wordWrap设置在Windows Internet Explorer中总是有效的,因为Internet Explorer不支持“文本自动换行”属性。

因此,在我的例子中,换行被设置为break-word(继承或默认?),导致文本溢出在FF和Chrome中工作,但在IE中不工作。

关于换行属性的Ms信息

你只需要添加一行css:

.app a {
   display: inline-block;
}

必须包含

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

绝对不能包含

display: inline

应该包含

position: sticky