使用
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. */
+--------------------+
发布于 2011-06-03 13:08:44
看过W3 spec for text-overflow之后,我认为只使用CSS是不可能的。省略是一种新特性,所以到目前为止,它可能还没有得到太多的用法或反馈。
然而,this guy似乎问了一个类似(或相同)的问题,并且有人能够提出一个很好的jQuery解决方案。您可以在此处演示该解决方案:http://jsfiddle.net/MPkSF/
如果javascript不是一个选择,我想你可能不走运……
发布于 2012-07-20 03:58:07
问得好..。我希望有一个答案,但这是你现在能得到的最接近CSS的答案。没有省略号,但仍然非常有用。
overflow: hidden;
line-height: 1.2em;
height: 3.6em; // 3 lines * line-height
发布于 2014-01-09 18:45:10
我发现这个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;
}
https://stackoverflow.com/questions/6222616
复制相似问题