सीएसएस के साथ लाइन या # अक्षरों द्वारा वर्ण सीमा को कैसे प्रतिबंधित करें?

Question

क्या कोई सीएसएस संपत्ति है जो निम्न में से कोई एक कर सकती है? लेकिन सबसे पहले, मुझे समझाओ।

एक चिनाई लेआउट की कल्पना करें जहां प्रत्येक आइटम चौड़ाई है: 200px; और प्रत्येक ऊंचाई होगी: 250 पीएक्स; (यह सिर्फ एक उदाहरण है)।

प्रत्येक आइटम में, एक थंबनेल और एक लिंक होता है, और अक्सर बार, यह लिंक 2-3 लाइनों तक लपेटता है, और इसलिए प्रत्येक आइटम की ऊंचाई अलग होती है।

क्या कोई तरीका है कि मैं कक्षा के भीतर अधिकतम # वर्णों को सेट कर सकता हूं, या लाइनों के एक निश्चित # के बाद रैपिंग काट सकता हूं? और शायद सामग्री डालने के लिए कुछ सीएसएस प्रभाव भी जोड़ें: "..."; रेखा से पहले यह दिखाने के लिए कि इसे काट दिया गया था?

किसी भी मदद की सराहना की जाती है।

धन्यवाद।

Answer 1

आप text-overflow कोशिश कर सकते हैं, लेकिन यह कुछ सीमाएं होती हैं, लेकिन अभी भी आप सूट हो सकता है:

Example

<div id="container"> 
    This is some short content to demonstrate the css-property 
    text-overflow 
</div>​ 

#container{ 
    width:100px; 
    height:50px; 
    border:1px solid red; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space: nowrap; 
}​ 

Answer 2

वर्ण नहीं, लेकिन आप एक तत्व की चौड़ाई पिक्सेल में सेट कर सकते हैं और text-overflow संपत्ति का उपयोग कर सकते हैं जो "..." जोड़ना चाहिए।

इसके अलावा, आप तत्व की ऊंचाई को सेट करके लाइनों की संख्या सीमित कर सकते हैं, उदाहरण के लिए, 30 पीएक्स और लाइन-ऊंचाई सीएसएस प्रॉपर्टी को 15px पर सेट करके overflow:hidden जोड़ें। इस तरह आपके पास टेक्स्ट की सटीक दो पंक्तियां होंगी।

.twoLines{ 
    height:30px; 
    line-height:15px; 
    overflow:hidden; 
}