多行文本溢出：省略號在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標記

回答

相關問題