多行文本溢出:省略号在CSS或者JS,与IMG标记
问题描述:
我试着使用:多行文本溢出:省略号在CSS或者JS,与IMG标记
- 文本溢出省略号功能CSS3中(但不支持多线)
- 几个jQuery的插件像dotdotdot(http://dotdotdot.frebsite.nl/)
- jquery自动更正(http://pvdspek.github.com/jquery.autoellipsis/)。
所有这些工具都能很好地工作,但是如果内容有图像,使用dotdotdot或jquery.autoellipsis截断的计算高度是错误的。
我只是想知道如果有人有一个伟大的想法来处理这个(也许一些服务器端处理?),感谢提前:-)。
答
通过为多行div
设置固定高度,然后绝对使用img
和省略号来简化脚本,使用您自己的省略号定位偏移量。正确的偏移是特定于font-size
和每个句子的特定字母的字距,因此除非使用等宽字体,否则尝试和错误是必需的。其基本结构是这样的:
<style type="text/css">
.truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; }
.lineup { top: 6px; }
.monalisa { position: absolute; top: 2px; left: -18px; }
.wrapper { position: relative; width: 360px }
.textblob { width: 330px; height: 30px; }
</style>
<!--...-->
<div class="wrapper">
<img class="monalisa" src="hppt://www.*.com/favicon.ico" alt="SO"/>
<div class="textblob">
<span class="truncate">…</span>
<span class="snippet">blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</span>
</div>
</div>
答
如果需要X-浏览器支持(不仅是歌剧和Webkit,如@ C69解释)。
我发现了一个更奇特的方式。 但也适用于手动调整。
看看jsfiddle上的工作示例。
HTML
<p>
Lorem ipsum dolor sit amet, consectetur
</p>
CSS
p {
height: 3.7em;
position: relative;
overflow: hidden;
width: 235px;
}
p:after{
/* works since IE10 , ff16, chrome26, safari6.1,opera12, android4.4 ; previouse browser need prefixes */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,2055,255,1) 30%);
/* for IE9,IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1);
bottom: 0;
content: "...";
float:right;
padding-left: 10px;
position: absolute;
right: 0;
}
'文本溢出:-o-省略号-lastline',但它只能在Opera工作:http://jsfiddle.net/zGvHW/6/对于Webkit浏览器,您可以使用'-webkit-line-clamp',当文本达到一定数量的行时,文本会被剪切。我不知道原生的Gecko或IE方法。 – c69 2012-01-07 19:31:12
不知道-o-ellipsis-lastline,但正如你所说,它只适用于Opera。我想在其他浏览器的javascript中实现会非常复杂,但这正是我期待的! – jben 2012-01-08 22:39:30