我不知道为什么这个简单的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 >
应该在第四次“测试”前后切断
当前回答
包括info后面写的四行，以便省略号起作用
.app a
{
color: #fff;
font: bold 15px/18px Arial;
height: 18px;
margin: 0 5px 0 5px;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 140px;
/*
Note: The Below 4 Lines are necessary for ellipsis to work.
*/
display: block;/* Change it as per your requirement. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
其他回答
你也可以添加float:left;在这个选择器内部:
#User_Apps_Content .DLD_App a
必须包含
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
绝对不能包含
display: inline
应该包含
position: sticky
添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App
demo
还请确保，直接的封闭元素具有固定的宽度，并且希望应用省略号的跨度具有display:block
文本溢出:省略;只有在以下情况下才有效:
元素的宽度必须限制在px(像素)。宽度在%(百分比)将不起作用。 元素必须有overflow:hidden和white-space:nowrap设置。
这里出现问题的原因是a元素的宽度没有限制。你确实有一个宽度设置，但因为元素被设置为display:inline(即默认值)，它会忽略它，也没有其他任何东西限制它的宽度。
你可以通过以下方法之一来解决这个问题:
将元素设置为display:inline-block或display:block(可能是前者，但取决于你的布局需要)。 将其中一个容器元素设置为display:block，并为该元素设置固定宽度或max-width。 将元素设置为float:left或float:right(可能是前者，但同样，就省略号而言，两者都应该具有相同的效果)。
我建议display:inline-block，因为这将对你的布局产生最小的附带影响;它的工作原理非常像显示:内联，它目前正在使用的布局，但也可以自由地尝试其他点;我已经尽可能多地提供信息来帮助你们理解这些东西是如何相互作用的;理解CSS的很大一部分是关于理解各种样式如何一起工作。
下面是您的代码片段，并添加了一个display:inline-block，以显示您有多接近。
.app a { 高度:18 px; 宽度:140 px; 填充:0; 溢出:隐藏; 位置:相对; 显示:inline-block; Margin: 0 5px 0 5px; text-align:中心; 文字修饰:没有; 文本溢出:省略; 空白:nowrap;} 颜色:# 000; ｝ < div class = "应用" > <a href="">Test Test Test Test Test Test Test</a> . < / div >
有用的参考资料:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
