अतिप्रवाह: अंत में छिपा डॉट्स

Question

मान लीजिए कि मेरे पास एक स्ट्रिंग है " मुझे बड़े चूतड़ पसंद हैं और मैं झूठ नहीं बोल सकता " और मैंने इसे काट दिया overflow:hidden, इसलिए यह कुछ इस तरह प्रदर्शित करता है:

मुझे बड़े चूतड़ पसंद हैं और मैं कैन

पाठ काट रहा है। क्या इसे इस तरह प्रदर्शित करना संभव है:

मुझे बड़े चूतड़ पसंद हैं और मैं कैन ...

CSS का उपयोग कर रहे हैं?

Comments

क्या यह सवाल गीत को बढ़ावा देने के लिए एक प्रयोग है?

— सिरिल गुप्ता

@CyrilGupta देर से प्रतिक्रिया के लिए क्षमा करें। मुझे बाथरूम की तरफ भागना पड़ा। आपके प्रश्न का उत्तर देने के लिए ... हाँ

— जो फिलिप्स

के संभावित डुप्लिकेट मैं छिपा अतिप्रवाह के साथ अंतराल में डॉट्स ( "...") कैसे दिखा सकते हैं?

— टर्मिंजजा

Answer 1

आप पाठ-अतिप्रवाह का उपयोग कर सकते हैं : दीर्घवृत्त; जो कि कैनीयूज़ के अनुसार सभी प्रमुख ब्राउज़रों द्वारा समर्थित है।

यहाँ jsbin पर एक डेमो है।

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big buts and I can not lie.
</div>

Comments

यह फ़ायरफ़ॉक्स 15.0.1 में काम करने लगता था: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

— Jace

हां, यह नए संस्करणों में काम करता प्रतीत होता है। जाहिर है कि यह जवाब इस बिंदु पर कुछ साल पुराना है।

— जो फिलिप्स

फ़ायरफ़ॉक्स ने संस्करण 7 के रूप में इसका समर्थन करना शुरू कर दिया, जो 2011 के उत्तरार्ध में जारी किया गया था।

— रिचर्ड ईव

मैं अपने सामान्य ज्ञान का उपयोग यह बताने के लिए कर सकता हूं कि यह उत्तर वोट और टिप्पणियों के आधार पर "सही" है। हालांकि, मैं वास्तव में यह देखने में विफल हूं कि यह उत्तर "सही" कैसे है। मैंने दोनों का उपयोग किया overflow: hidden;और text-overflow: ellipsis;एक <p>तत्व (यानी, एक ब्लॉक तत्व) और ...अंत में कोई नहीं मिला (निश्चित रूप से मैं यह सुनिश्चित कर रहा हूं कि यह वास्तव में अतिप्रवाह है)। मैं भी बिना इस कोशिश की overflow: hidden;हिस्सा है, और यह भी एक साथ <span>अंदर तत्व <p>तत्व जहां <p>तत्व था overflow: hidden;और <span>था text-overflow: ellipsis;कोई फर्क नहीं पड़ता कि मैं कैसे की कोशिश, यह एक असफल है ..

— VoidKing

खैर, मुझे लगता है कि मैं समस्या जानता हूं। मैं ओवरफ्लो को प्रतिबंधित करने की कोशिश कर रहा हूं, max-heightइसलिए मैं white-space:nowrap

— VoidKing

Answer 2

अपनी समस्या के लिए निम्नलिखित स्निपेट देखें

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>

Comments

जोड़ने के लिए "सफेद-स्थान: nowrap;" कुछ मामलों में जिसकी आवश्यकता हो सकती है

— leo

2 पंक्तियों को प्रदर्शित करने के लिए पाठ को कैसे गायब करें?

— मंगल ग्रह 2049

@ Matian2040 आप निश्चित ऊंचाई और अतिप्रवाहित छिपी हुई शैलियों को समायोजित करके समायोजित कर सकते हैं, इस फिडेल jsfiddle.net/5135L4bx की

— अर्जुन

ओह मैं समझा। मैंने कोशिश की। हालाँकि ऐसा लगता है कि दो पंक्तियों का मतलब है कि अंत में ... नहीं होगा?

— मंगल १

display: inline-block;मेरे लिए लापता घटक था। धन्यवाद।

— सेठ

Answer 3

इसे आज़माएं यदि आप लाइनों को 3 तक सीमित करना चाहते हैं और तीन लाइनों के बाद डॉट्स दिखाई देंगे। यदि हम लाइनों को बढ़ाना चाहते हैं तो बस -webkit-line-clamp मान बदलें और div आकार के लिए चौड़ाई दें।

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

Comments

माफी माँगता हूँ, मुझे यकीन नहीं कैसे मैं अपने शब्दों को हटा दिया!

— एलेक

क्रोम पर बहुत अच्छा काम करता है, लेकिन ध्यान दें कि यह फ़ायरफ़ॉक्स

— केन बिगलर

फ़ायरफ़ॉक्स कहते हैं कि मैं दूसरे ब्राउज़र पर कैसे करूं? संपादित करें: stackoverflow.com/questions/33058004/…

— user3187724

Answer 4

उम्मीद है कि यह आपके लिए उपयोगी हो:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

Answer 5

हाँ, text-overflowसीएसएस में संपत्ति के माध्यम से 3. कैविएट: यह ब्राउज़रों में अभी तक सार्वभौमिक रूप से समर्थित नहीं है।

Comments

ब्राउज़र का समर्थन बहुत अच्छा है, अब फ़रवरी 2012 तक अच्छा है। caniuse.com/#search=text-overflow

— सिमोन ईस्ट

आह, आप इस प्रश्न को तीन साल बाद दिखाए गए कारण हैं।

— श्री लिस्टर

Answer 6

में बूटस्ट्रैप 4 , आप एक जोड़ सकते हैं .text-truncateएक अंडाकार के साथ पाठ काटना वर्ग।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
  I like big butts and I cannot lie
</span>

Answer 7

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>

Answer 8

अधिकांश समाधान यहाँ स्थैतिक चौड़ाई का उपयोग करते हैं। लेकिन यह कभी-कभी कुछ कारणों से गलत हो सकता है।

उदाहरण: मेरे पास कई स्तंभों वाली तालिका थी। उनमें से अधिकांश संकीर्ण (स्थिर चौड़ाई) हैं। लेकिन मुख्य स्तंभ जितना संभव हो उतना चौड़ा होना चाहिए (स्क्रीन आकार पर निर्भर करता है)।

HTML:

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

सीएसएस:

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}

Answer 9

<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>

Answer 10

लोड पर पाठ छिपाएं और होवर पर दिखाएं

<span class="hide-text"> How to hide text by dots and show text on hover</span>

.hide-text {
    width: 70px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  span:hover {
     white-space: unset;
     text-overflow: unset;
  }