with
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
如果溢出，“…”将显示在行末。 但是，这将只在一行中显示。 但我希望它能多行显示。
它可能看起来像:
+--------------------+
|abcde feg hij dkjd|
|dsji jdia js ajid s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+
当前回答
在查看了W3规范的文本溢出后，我认为仅使用CSS是不可能的。省略号是一个新属性，所以它可能还没有得到太多的使用或反馈。
然而，这家伙似乎问了一个类似(或相同)的问题，有人能够提出一个很好的jQuery解决方案。您可以在这里演示解决方案:http://jsfiddle.net/MPkSF/
如果javascript不是一个选择，我认为你可能不走运…
其他回答
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
点击这里查看更多信息
为了完整起见，我想补充一下这个问题。
Opera有一个叫做-o- elliposis -lastline的非标准支持。 dotdotdot是一个很棒的jQuery插件。
我发现这个css (scss)解决方案的工作相当好。在webkit浏览器上，它显示省略号，而在其他浏览器上，它只是截断文本。这对我的预期用途很好。
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;
h2 {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
创建者提供的示例:http://codepen.io/martinwolf/pen/qlFdp
好问题……我希望有一个答案，但这是最近你能得到的CSS。没有省略，但仍然很好用。
overflow: hidden;
line-height: 1.2em;
height: 3.6em; // 3 lines * line-height
也有几个jquery插件处理这个问题，但许多不处理多行文本。以下工作:
http://pvdspek.github.com/jquery.autoellipsis/ http://dotdotdot.frebsite.nl/ http://keith-wood.name/more.html http://github.com/tbasse/jquery-truncate
还有一些性能测试。
