多行文本溢出：省略号在CSS或者JS，与IMG标记

文本溢出省略号功能CSS3中（但不支持多线）
几个jQuery的插件像dotdotdot（http://dotdotdot.frebsite.nl/）
jquery自动更正（http://pvdspek.github.com/jquery.autoellipsis/）。

所有这些工具都能很好地工作，但是如果内容有图像，使用dotdotdot或jquery.autoellipsis截断的计算高度是错误的。

我只是想知道如果有人有一个伟大的想法来处理这个（也许一些服务器端处理？），感谢提前:-)。

2012-01-05 jben

'文本溢出：-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

通过为多行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.stackoverflow.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>

来源

2012-08-23 06:36:53

如果需要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; 
}

来源：
1 mobify
2 css-tricks

来源

2014-09-08 13:55:55 stephanfriedrich

多行文本溢出：省略号在CSS或者JS，与IMG标记

回答

相关问题