我不知道为什么这个简单的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 >

应该在第四次“测试”前后切断


当前回答

公认的答案是棒极了。但是,您仍然可以使用% width并获得text-overflow: ellipsis。解决方法很简单:

display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */

似乎无论何时使用calc,最终值都是以绝对像素表示的,因此对于1000px宽度的容器,将80%转换为800px之类的值。因此,不要使用width: [YOUR PERCENT]%,而是使用width: calc([YOUR PERCENT]%)。

其他回答

在引导程序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 >

添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App

demo

因此,如果您遇到这个问题是因为您在试图让省略号在display: flex容器内工作时遇到了麻烦,请尝试向最外层的容器添加min-width: 0,该容器正在溢出其父容器,即使您已经为它设置了overflow: hidden,并查看这对您来说是如何工作的。

关于这个代码的更多细节和工作示例由aj-foster编写。对我来说完全管用。

你也可以添加float:left;在这个选择器内部:

#User_Apps_Content .DLD_App a

包括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;
}