如何在DIV內的裁剪文本之後添加「...」的整潔方式？

我需要在產品圖像旁邊顯示「存根」說明文字。但是如果它很長（或者更少，如果描述只是簡短的文字），我需要將它切成3行高。但問題是文本的字段可能會有所不同。而其他問題是我必須在存根文本的末尾添加「...」。如何在DIV內的裁剪文本之後添加「...」的整潔方式？

目前的CSS：

.box { 
    width: 100px; 
    height: 50px; 
    overflow:hidden; 
}

的HTML：

<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in egestas diam, et gravida ligula. Nullam fermentum eget purus consectetur semper. Morbi ut adipiscing purus. Sed lobortis nulla erat, pulvinar pharetra mauris porttitor sagittis. Morbi pellentesque dui quis tortor feugiat, eu malesuada dui faucibus. Integer magna nisi, cursus ac diam accumsan, hendrerit laoreet nibh. In commodo lorem massa, eget semper tellus cursus a. Proin sagittis consectetur sapien ut congue. Vivamus cursus tellus in pellentesque hendrerit. Curabitur placerat tincidunt porta. Nunc pulvinar odio at enim imperdiet vulputate.</div>

與當前的CSS的HTML結果：

Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Donec in egestas diam, et

HTML結果預期：

Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Donec in egestas diam, et ...

您認爲完成此操作的方法是什麼？這意味着它將來可以靈活/可擴展？我擁有HTML，CSS，JSP，Javascript和JQuery。但我無法改變數據庫中的數據。但是，當然我可以在將數據呈現給用戶之前處理從數據庫接收到的任何數據。

來源

2013-12-20 Chen Li Yong

應該有一個jQuery插件了點。 –

你可以看看類似的東西，像這樣：http://jsfiddle.net/BramVanroy/t4CQt/7/ –

這可能有所幫助 - http://www.mobify.com/blog/multiline-ellipsis-in- pure-css/ – Anshul

你可以用一個漂亮的jQuery插件的是，看到http://dotdotdot.frebsite.nl/

來源

2013-12-20 07:47:20

這個也很棒！儘管我更喜歡本頁面中的其他CSS解決方案，但這也是一個很好的答案。爲什麼我從來不知道這個插件...嗯... –

我也會把我的帽子與

用法示例爲您提供：

$('.box').trunk8();

來源

2013-12-20 07:56:39

trunc8是另一個整潔的JQuery解決方案，也許我會嘗試使用這個，如果CSS解決方案太複雜的代碼。：）謝謝！ –

我想我的方式並不完美，但你可以在CSS中做到這一點：

#longText{ 
    width : 400px; height : 200px; overflow: hidden; position : relative; 
} 

#longText:after{ 
    content: '...'; position: absolute; bottom: 0; right: 0; 
}

隨着jsfiddle demo

來源

2013-12-20 07:59:32 kevpoccs

雖然你的方式「不完美」，但你給我靈感來嘗試別的方法。到目前爲止，你的方法是最簡單，最簡潔和最乾淨的！謝謝！ –

不用客氣，我在一個'display：-webikit-box'中使用'text-overflow'在stackoverflow中發現了一些內部事件，但是我害怕與其他兄弟如FF或IE兼容 – kevpoccs

CSS3中有一種叫text-overflow財產，它有增加了一個屬性ellipsis「......」在剪切文本的結尾。

不幸的是，總的來說，它只能工作在一條線上。但作爲回報，這很容易，不需要Javascript和has a great browser support。

您可以檢查出我爲你的榜樣作出JSFiddle或者只是使用下面的CSS代碼：

.box { 
    width: 200px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap; 
}

來源

2014-05-10 07:32:58 Itchy

如何在DIV內的裁剪文本之後添加「...」的整潔方式？

回答

相關問題