2012-08-10 87 views
2

我想知道下面的結構是否可能。基於固定高度和寬度的剪裁文本

enter image description here

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

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

這裏的的jsfiddle鏈接:

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

+0

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

+0

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

+0

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

回答

1

這似乎工作:

.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/

文本溢出:省略號發揮作用,只有當:

  1. 盒具有比可見光等溢出。
  2. 盒子有白色空間:nowrap。
+0

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

相關問題