只需添加包含该段落的div即可

white-space: nowrap 
width: 50px; 
overflow: hidden;
text-overflow: ellipsis; 
border: 1px solid #000000;

公认的答案是棒极了。但是，您仍然可以使用% 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]%)。

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

我也遇到过同样的问题，似乎上面的解决方案都不适用于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;
  }
}

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

demo

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

#User_Apps_Content .DLD_App a