Wie setze ich die Elementhöhe für eine feste Anzahl von Textzeilen?

Question

Kann ich bei einem Text, der etwa 10 Zeilen einnimmt, die Größe des Containers so ändern, dass nur die ersten drei Zeilen angezeigt werden und die anderen ausgeblendet werden? Offenbar funktioniert, aber ich denke, es ist nicht zuverlässig:

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

Kann ich auf die Tatsache verlassen, dass height of one row = 2.5ex oder ist das nur ein Zufall in den Browsern ich zu testen verwende?

Answer 1

Wenn Sie dies nicht benutzen wollen Sie die line-height ist 2.5ex

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

Demo

Answer 2

Die Ex-Einheit ist die Schriftart x-Höhe (Höhe seiner x-Zeichen) immer sicherstellen sollte. Ich würde das hier nicht benutzen. Sie sollten die em-Einheit verwenden. Dies ist die tatsächliche Schrifthöhe. Die Schrifthöhe wird durch Festlegen der Eigenschaft line-height definiert. Also:

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

Hier sind einige weitere Informationen über CSS Längeneinheiten: http://www.w3.org/TR/CSS21/syndata.html#length-units

Answer 3

Sie die Zeilenhöhe eines Textes einstellen und damit die genaue Höhe jeder Zeile kennt und stellen Sie die gewünschte Höhe des Containers , einfach dies zu tun:

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

Jetzt funktioniert alles richtig :)

Answer 4

Sie können die webkit Eigenschaft Line-Klemme verwenden

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

Es funktioniert nicht auf allen Browsern, aber hoffentlich wird es eines Tages.