基於固定高度和寬度的剪裁文本

enter image description here

這裏我有固定的寬度和高度（外箱）的一個div。我使它具有固定的寬度和高度，因爲它是一個列表項目，我希望它們是統一的。現在，我在描述區域遇到問題。我希望它具有可以包裝成多行的文本，如果不適合，它會顯示一個省略號。現在我打算嚴格設置font-size和line-height，以便在描述div中顯示兩行文本。它是否正確？我擔心渲染會在某些瀏覽器中混亂，並且設計可能非常脆弱。我也有點不確定如何使用純CSS解決方案實現橢圓。我試過text-overflow: ellipsis，但無法完成它的工作。

說實話，我還不確定自己是否在正確的道路上。我在想這個結構可能已經存在一個更好的解決方案。還有其他人在做這個嗎？任何幫助將非常感激。謝謝。

這裏的的jsfiddle鏈接：

http://jsfiddle.net/3kJWQ/4/

來源

2012-08-10 maru

你可以發表一個你到目前爲止的jsFiddle嗎？我認爲我們中的一些人肯定可以提供幫助，但不希望重新從頭開始重新測試您的佈局。 – 2012-08-10 18:19:31

哦..好吧，我已經更新了包含JsFiddle鏈接的問題。希望它有幫助，謝謝。 – maru 2012-08-10 19:00:11

可能的重複：http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe – snuffn 2012-08-11 13:19:45

我得到了這個問題的解決方案：

Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

我選擇使用該插件的jQuery dotdotdot。

來源

2012-08-11 14:11:34 maru

這似乎工作：

.description { 
    height: 60px; 
    font-size: 14px; 
    line-height: 21px; 
    overflow: hidden; 
    border: 1px solid #000; 
    text-overflow: ellipsis; 
    white-space: nowrap;

}

來源：http://deepubalan.com/blog/2010/11/27/text-overflow-css3-property-explained-pure-css-solution-to-get-ellipsis/

文本溢出：省略號發揮作用，只有當：

盒具有比可見光等溢出。

盒子有白色空間：nowrap。

來源

2012-08-10 19:29:46

我認爲他們希望div有兩行的文字。 – 2012-08-10 19:34:40

基於固定高度和寬度的剪裁文本

回答

相關問題