在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;-)

你可以尝试在CSS中添加以下省略号:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

但这段代码似乎只适用于单行修剪。更多修剪文本和显示省略号的方法可以在这个网站上找到:http://blog.sanuker.com/?p=631

我有一个问题与省略下铬。打开空白:nowrap似乎解决了这个问题。

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

你需要CSS溢出，宽度(或max-width)，显示和空白。

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

身体{ 溢出:隐藏; ｝ 跨度{ 边框:纯蓝色2px; 空白:nowrap;} 文本溢出:省略; 宽度:100 px; 显示:块; 隐藏溢出: ｝ <span>Test Test Test Test Test </span>

齿顶高 如果你想了解行夹紧(Multiline Overflow Ellipses)技术的概述，请查看CSS-Tricks页面:https://css-tricks.com/line-clampin/

附录2(2019年5月) 正如这个链接所声称的，Firefox 68将支持-webkit-line-clamp (!)

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

http://jsfiddle.net/uh9zD/

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

只是给可能无意中发现这个的人一个提示…我的h2继承了

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

这是不允许省略的。显然这很棘手，是吧?