我使用:

溢出-x:剪辑只是水平折叠它 空格:避免新行 Text-overflow:使用省略号添加…在最后

overflow-x: clip;
white-space: nowrap;
text-overflow: ellipsis;

考虑到显示为伸缩它不会工作，只是改变它到一个适合你的需要。

在Chrome中使用多行:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

灵感来自youtube;-)

无固定宽度

对于我们这些不想使用固定宽度的人来说，它也可以使用display: inline-grid。因此，除了必需的属性，还需要添加显示

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}

word-wrap: break-word;

这个，只有这个对我有用 对于一个

<pre> </pre> 

tag

其他一切都没有做到省略号....

确保你有一个块元素，一个最大大小，并将overflow设置为hidden。(在IE9和FF 7测试)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

在CSS中添加下列行以使省略号工作

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }