我不知道为什么这个简单的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 >
应该在第四次“测试”前后切断
我不知道为什么这个简单的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: flex容器内工作时遇到了麻烦,请尝试向最外层的容器添加min-width: 0,该容器正在溢出其父容器,即使您已经为它设置了overflow: hidden,并查看这对您来说是如何工作的。
关于这个代码的更多细节和工作示例由aj-foster编写。对我来说完全管用。
其他回答
添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App
demo
因此,如果您遇到这个问题是因为您在试图让省略号在display: flex容器内工作时遇到了麻烦,请尝试向最外层的容器添加min-width: 0,该容器正在溢出其父容器,即使您已经为它设置了overflow: hidden,并查看这对您来说是如何工作的。
关于这个代码的更多细节和工作示例由aj-foster编写。对我来说完全管用。
只需添加包含该段落的div即可
white-space: nowrap
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
你只需要添加一行css:
.app a {
display: inline-block;
}
锚,跨度…标签默认是内联元素,如果内联元素宽度属性不起作用。因此,您必须将元素转换为内联块或块级元素