我不知道为什么这个简单的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 >
应该在第四次“测试”前后切断
当前回答
必须包含
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
绝对不能包含
display: inline
应该包含
position: sticky
其他回答
锚,跨度…标签默认是内联元素，如果内联元素宽度属性不起作用。因此，您必须将元素转换为内联块或块级元素
你也可以添加float:left;在这个选择器内部:
#User_Apps_Content .DLD_App a
我一直有这个问题，我想要一个解决方案，可以很容易地与动态宽度工作。解决方案使用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 >
你只需要添加一行css:
.app a {
display: inline-block;
}
还请确保，直接的封闭元素具有固定的宽度，并且希望应用省略号的跨度具有display:block
