div के अंदर फसल पाठ

Question 1

<div style="display:inline-block;width:100px;">

very long text
</div>

पाठ को काटने के लिए शुद्ध सीएसएस का उपयोग करने का कोई भी तरीका जो अगली नई पंक्ति पर दिखाने के बजाय बहुत लंबा है और केवल अधिकतम 100px दिखाता है

Question 2

<div class="crop">longlong longlong longlong longlong longlong longlong </div>

यह एक संभव तरीका है जिसके बारे में मैं सोच सकता हूं

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}

इस तरह लंबा पाठ अभी भी लिपटेगा, लेकिन overflowसेट के कारण दिखाई नहीं देगा , और line-heightउसी तरह सेट करके heightहम यह सुनिश्चित कर रहे हैं कि केवल एक पंक्ति कभी प्रदर्शित होगी।

यहां डेमो देखें और इंटरैक्टिव उदाहरणों के साथ अच्छा अतिप्रवाह संपत्ति विवरण।

Question 3

आप उपयोग कर सकते हैं:

overflow:hidden;

क्षेत्र के बाहर पाठ को छिपाने के लिए।

ध्यान दें कि यह अंतिम पत्र काट सकता है (इसलिए अंतिम पत्र का एक भाग अभी भी प्रदर्शित किया जाएगा)। एक अच्छा तरीका अंत में एक दीर्घवृत्त प्रदर्शित करना है। आप इसका उपयोग करके कर सकते हैं text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

Question 4

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}

http://jsfiddle.net/hT3YA/

Question 5

रिश्तेदार इकाइयों का उपयोग क्यों नहीं करते?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Question 6

नीचे दिया गया कोड आपके पाठ को आपके द्वारा तय की गई चौड़ाई के साथ छिपा देगा। लेकिन उत्तरदायी डिजाइन के लिए बिल्कुल सही नहीं है।

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

अपडेट करें

मैंने (मोबाइल) डिवाइस पर ध्यान दिया है कि पाठ (मिश्रित) एक दूसरे के साथ (निश्चित चौड़ाई) के कारण है ... इसलिए मैंने ऊपर दिए गए कोड को संपादित किया है ताकि अनुसरण के रूप में जिम्मेदारी से छिपाया जा सके:

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

(अधिकतम-चौड़ाई) सुनिश्चित करें कि पाठ जिम्मेदारी से छिपाया जाएगा जो कुछ भी (स्क्रीन आकार) है और एक दूसरे के साथ मिश्रित नहीं होगा।

Question 7

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="cut_text">

very long text
</div>

स्निपेट का विस्तार करें