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

Question

मेरा सीएसएस:

#content_right_head span
{
  display:inline-block;
  width:180px;
  overflow:hidden !important;
}

अब यह कंटेंट कंटेंट दिखा रहा है

लेकिन मैं कंटेंट कंटेंट की तरह दिखाना चाहता हूं ...

मुझे सामग्री के बाद डॉट्स दिखाने की आवश्यकता है। डेटाबेस से सामग्री गतिशील रूप से आ रही है।

Answer 1

इसके लिए आप text-overflow: ellipsis;प्रॉपर्टी का इस्तेमाल कर सकते हैं। इस तरह लिखो

span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>

JSFiddle

Comments

मैं 'चौड़ाई' को 'अधिकतम-चौड़ाई' में बदलने का सुझाव

— दूंगा

उत्तरदायी लेआउट के बारे में क्या? मेरी चौड़ाई तय नहीं है, न ही अधिकतम-चौड़ाई।

— जेपी_

मैं onclick का उपयोग करके इसे आगे कैसे बढ़ा सकता हूं?

— अंकुश ऋषि

यह IE11 और फ़ायरफ़ॉक्स में काम नहीं करता है। इसके लिए कोई महान समाधान?

— techie_questie

Answer 2

यदि आप पाठ-अतिप्रवाह: दीर्घवृत्त का उपयोग कर रहे हैं, तो ब्राउज़र उस कंटेनर के भीतर जो भी संभव होगा वह सामग्री दिखाएगा। लेकिन यदि आप डॉट्स से पहले अक्षरों की संख्या निर्दिष्ट करना चाहते हैं या कुछ सामग्री को छोड़ कर डॉट्स जोड़ना चाहते हैं, तो आप नीचे दिए गए फ़ंक्शन का उपयोग कर सकते हैं।

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // you can also use substr instead of substring
    string = string.substring(0,limit) + dots;
  }

    return string;
}

जैसे बुलाओ

add3Dots("Hello World",9);

आउटपुट

Hello Wor...

इसे यहां कार्रवाई में देखें

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // you can also use substr instead of substring
    string = string.substring(0,limit) + dots;
  }

    return string;
}



console.log(add3Dots("Hello, how are you doing today?", 10));

Answer 3

मुझे लगता है कि आप text-overflow: ellipsisसंयोजन के लिए देख रहे हैं white-space: nowrap

कुछ और विवरण यहाँ देखें

Answer 4

इसे इस्तेमाल करे,

.truncate {
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncateअपने तत्व में कक्षा जोड़ें ।

---

संपादित करें ,

उपरोक्त समाधान सभी ब्राउज़रों में काम नहीं कर रहा है। आप क्रॉस ब्राउज़र समर्थन के साथ jQuery प्लगइन निम्नलिखित कोशिश कर सकते हैं।

(function ($) {
    $.fn.ellipsis = function () {
        return this.eachAsync({
            delay: 100,
            bulk: 0,
            loop: function (index) {
                var el = $(this);

                if (el.data("fullText") !== undefined) {
                    el.html(el.data("fullText"));
                } else {
                    el.data("fullText", el.html());
                }

                if (el.css("overflow") == "hidden") {
                    var text = el.html();
                    var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width('auto')
                                        .height(el.height())
                                        ;

                    el.after(t);

                    function width() { return t.width() > el.width(); };

                    var func = width;
                    while (text.length > 0 && width()) {
                        text = text.substr(0, text.length - text.length * 25 / 100);
                        t.html(text + "...");
                    }

                    el.html(t.html());
                    t.remove();
                }
            }
        });
    };
})(jQuery);

कैसे कॉल करें,

$("#content_right_head span").ellipsis();

Comments

widthसंपत्ति हो सकती है 100%। मुझे लगता है कि यह इस तरह बेहतर है: .truncate { display:inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

— मैहदी

Answer 5

ठीक है, "टेक्स्ट-ओवरफ्लो: एलिप्सिस" ने मेरे लिए काम किया, लेकिन सिर्फ अगर मेरी सीमा 'चौड़ाई' पर आधारित थी, तो मुझे एक समाधान की आवश्यकता है जिसे 'चौड़ाई' के बजाय लाइनों पर ('ऊंचाई' पर लागू किया जा सकता है) मैंने यह स्क्रिप्ट की:

function listLimit (elm, line){
    var maxHeight = parseInt(elm.css('line-Height'))*line;

    while(elm.height() > maxHeight){
        var text = elm.text();
        elm.text(text.substring(0,text.length-10)).text(elm.text()+'...');
    }
}

और जब मुझे, उदाहरण के लिए, कि मेरी h3 में केवल 2 रेखाएँ हैं, मैं करता हूँ:

$('h3').each(function(){
   listLimit ($(this), 2)
})

मुझे पता है कि प्रदर्शन की जरूरतों के लिए सबसे अच्छा अभ्यास था, लेकिन मेरे लिए काम किया।

Answer 6

आप यह कोशिश कर सकते हैं:

.classname{
    width:250px;
    overflow:hidden;
    text-overflow:ellipsis;
}

Answer 7

 var tooLong = document.getElementById("longText").value;
    if (tooLong.length() > 18){
        $('#longText').css('text-overflow', 'ellipsis');
    }

Answer 8

उनके उत्तर के लिए बहुत बहुत @sandeep धन्यवाद।

मेरी समस्या यह थी कि मैं माउस क्लिक से पाठ को दिखाना / छिपाना चाहता हूं। तो डिफ़ॉल्ट रूप से डॉट्स के साथ लघु पाठ दिखाया जाता है और लंबे पाठ पर क्लिक करके प्रकट होता है। फिर से क्लिक करना उस लंबे पाठ को छुपाता है और फिर से छोटा दिखाता है।

करने के लिए काफी आसान बात: बस पाठ-अतिप्रवाह के साथ वर्ग को जोड़ें / निकालें: दीर्घवृत्त।

HTML:

<span class="spanShortText cursorPointer"  onclick="fInventoryShippingReceiving.ShowHideTextOnSpan(this);">Some really long description here</span>

CSS (@ के साथ @ sandeep .cursorPointer जोड़ा गया)

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

.cursorPointer {
  cursor: pointer;
}

JQuery का हिस्सा - मूल रूप से वर्ग cSpanShortText को केवल हटाता है / जोड़ता है।

  function ShowHideTextOnSpan(element) {
    var cSpanShortText = 'spanShortText';
    var $el = $(element);
    if ($el.hasClass(cSpanShortText)) {
      $el.removeClass(cSpanShortText)
    } else {
      $el.addClass(cSpanShortText);
    }
  }