如何爲固定行數的文本設置元素高度

Question

給定一些佔用大約10行的文本，如何調整其容器大小以僅顯示前3行並隱藏其他行？顯然，這個工作，但我認爲這是不可靠的：

.container { 
    height: 7.5ex; /* 2.5ex for each visible line */ 
    overflow: hidden; 
} 

我可以依靠的事實，height of one row = 2.5ex或者是隻是我使用來測試瀏覽器是巧合嗎？

Answer 1

如果你要使用這個你應該確保line-height總是2.5ex

.container { 
    line-height: 2.5ex; 
    height: 7.5ex; /* 2.5ex for each visible line */ 
    overflow: hidden; 
} 

Demo

Answer 2

的前部是字體的x-height（其X形的高度）。我不會在這裏使用它。你應該使用em單元。這是實際的字體高度。 font-height是通過設置line-height屬性來定義的。所以：

.container { 
    height: 3em; /* 1em for each visible line */ 
    overflow: hidden; 
} 

這裏是CSS長度單位一些更多的信息：http://www.w3.org/TR/CSS21/syndata.html#length-units

Answer 3

你可以設置一個文本行的高度，並用它知道每一行的確切高度，並設置所需高度的容器，只是這樣做：

.container { 
    line-height:25px; 
    height:75px; 
    overflow:hidden; 
} 

現在一切工作的正確:)

Answer 4

您可以使用WebKit財產線鉗

.container { 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
} 

它不適用於所有瀏覽器，但希望它有一天。