我不知道为什么这个简单的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 >
应该在第四次“测试”前后切断
当前回答
添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App
demo
其他回答
你也可以添加float:left;在这个选择器内部:
#User_Apps_Content .DLD_App a
添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App
demo
必须包含
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
绝对不能包含
display: inline
应该包含
position: sticky
包括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;
}
你只需要添加一行css:
.app a {
display: inline-block;
}