पाठ की एक निश्चित संख्या के लिए तत्व ऊंचाई कैसे सेट करें

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

पूर्व इकाई फ़ॉन्ट एक्स ऊंचाई (अपने एक्स चरित्र की ऊंचाई) है। मैं इसका इस्तेमाल यहां नहीं करूँगा। आपको एम यूनिट का उपयोग करना चाहिए। यह वास्तविक फ़ॉन्ट-ऊंचाई है। फ़ॉन्ट-ऊंचाई को लाइन-ऊंचाई संपत्ति सेट करके परिभाषित किया गया है। तो: http://www.w3.org/TR/CSS21/syndata.html#length-units

Answer 3

आप एक पाठ की पंक्ति ऊंचाई सेट और यह अपने कंटेनर की प्रत्येक पंक्ति की सही ऊंचाई सेट वांछित ऊंचाई जानता है के साथ कर सकते हैं:

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

यहाँ सीएसएस लंबाई इकाइयों पर कुछ और जानकारी है , बस यह कर:

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

अब सब कुछ ठीक ही काम करता है :)

Answer 4

आप वेबकिट संपत्ति लाइन क्लैंप का उपयोग कर सकते

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

यह सभी ब्राउज़रों पर काम नहीं करता है, लेकिन उम्मीद है कि यह एक दिन होगा।