我不知道为什么这个简单的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 >
应该在第四次“测试”前后切断
当前回答
只需添加包含该段落的div即可
white-space: nowrap
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
其他回答
还请确保，直接的封闭元素具有固定的宽度，并且希望应用省略号的跨度具有display:block
添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App
demo
只需添加包含该段落的div即可
white-space: nowrap
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
你也可以添加float:left;在这个选择器内部:
#User_Apps_Content .DLD_App a
我也遇到过同样的问题，似乎上面的解决方案都不适用于Safari。对于非safari浏览器，这工作得很好:
display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
对于Safari，这是适合我的。注意，用于检查浏览器是否是Safari的media查询可能会随着时间的推移而改变，所以如果它不适合您，只需修补一下media查询即可。有了线夹特性，也可以在有省略号的网中有多条线，见这里。
// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
@media {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
white-space: normal;
}
}
