我不知道为什么这个简单的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
其他回答
必须包含
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
绝对不能包含
display: inline
应该包含
position: sticky
添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App
demo
在引导程序4中，可以添加.text-truncate类来用省略号截断文本。
< script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> < script src = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " > < /脚本> <！——内联级别——> <span class=" font - family:宋体" style=" font - family:宋体;"> 敏捷的棕色狐狸跳过了懒惰的狗。 < / span >
把这些写在你的css规则中。
display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
你也可以添加float:left;在这个选择器内部:
#User_Apps_Content .DLD_App a
