Jquery - लाइन द्वारा ट्रंकेट टेक्स्ट (वर्ण गणना द्वारा नहीं)

Question

मुझे लाइन द्वारा एक अनुच्छेद अनुच्छेद को छूने के लिए एक jquery स्क्रिप्ट चाहिए (वर्ण गणना द्वारा नहीं)।

मैं एक समान रूप से छोटा टेक्स्ट-ब्लॉक प्राप्त करना चाहता हूं। टेक्स्ट पैराग्राफ को विस्तार और छोटा करने के लिए इसमें "अधिक" और "कम" लिंक होना चाहिए। (पाठ क्षेत्र तत्व के लिए, लेकिन यह `और मेरे लिए काम नहीं करता है)

<div class="content"> 
<h2>Headline</h2> 
<p>The paragraph Text here</p> 
</div> 

निकटतम समाधान मैं SOF पर मिल सकता है नीचे से एक है: मेरे पाठ पैरा एक वर्ग के साथ एक div में लपेटा जाता है, इस तरह: Limiting number of lines in textarea

किसी भी सुझाव के लिए बहुत धन्यवाद। बेन

Answer 1

यदि आप एक मोनोस्पेस्ड फ़ॉन्ट का उपयोग करते हैं, तो आपके पास इस काम पर एक शॉट होगा, क्योंकि आपको एक अच्छा विचार होगा कि परिभाषित चौड़ाई के तत्व के लिए प्रत्येक पंक्ति पर कितने अक्षर फिट होते हैं। हालांकि, यदि कोई शब्द लाइनों में टूट जाता है, तो यह मुश्किल हो सकता है ..

ई: एक और प्रश्न मिला जो मूल रूप से आप के बाद क्या है - उनके पास वास्तव में कोई संकल्प नहीं था, लेकिन मेरे दिमाग में, रेखा-ऊंचाई और तत्व ऊंचाई निकटतम लगती है।

"How can I count text lines inside a dom element"

Answer 2

क्यों अतिप्रवाह के साथ पी तत्व नहीं: छिपा हुआ; निश्चित रेखा ऊंचाई दें, div की ऊंचाई को कैल्यूक्लेट करें ताकि आईडी में आपको आवश्यक रेखाओं की संख्या हो और केवल जावा की जावा की ऊंचाई को बदल दें।

p{ 
    overflow:hidden; 
    line-height:13px; 
    height:26px; /* show only 2 rows */ 
} 
<script type="text/javascript"> 
    function seeMoreRows(){ 
     $(p).height("52px"); 
    } 
</script> 

Answer 3

एक बुनियादी दृष्टिकोण के लिए, आप line-height सीएसएस संपत्ति पर एक नज़र डालें और का उपयोग करें कि अपनी गणना में कर सकता है। ध्यान रखें कि यह दृष्टिकोण अन्य इनलाइन तत्वों के लिए जिम्मेदार नहीं होगा जो उस ऊंचाई से बड़े हैं (उदा। छवियां)।

यदि आप कुछ और अधिक उन्नत चाहते हैं, तो आप getClientRects() फ़ंक्शन का उपयोग करके प्रत्येक पंक्ति के बारे में जानकारी प्राप्त कर सकते हैं। यह फ़ंक्शन TextRectangle ऑब्जेक्ट्स का संग्रह देता है जिसमें प्रत्येक के लिए चौड़ाई, ऊंचाई और ऑफसेट होता है।

this answer यहां देखें उदाहरण के लिए getClientRects() काम करता है (उदाहरण के लिए एक असंबंधित लक्ष्य)।

---

अपडेट, वापस आने और वास्तविक उत्तर के साथ इस उत्तर को अपडेट करने में थोड़ा समय था। यह बुनियादी है, लेकिन आप अंदाजा हो:

http://jsbin.com/ukaqu3/2

संकेत के एक जोड़े:

• संग्रह getClientRects स्थिर है द्वारा दिया, यह स्वतः ही अपडेट नहीं होगा अगर की युक्त तत्व आयाम बदलते हैं। मेरा उदाहरण विंडो के आकार बदलने की घटना को कैप्चर करके इसके आसपास काम करता है।

• कुछ अजीब मानकों-अनुपालन कारणों के लिए जो मुझे समझ में नहीं आ रहा है, तत्व जिसे आप कहते हैं, getClientRects पर एक इनलाइन तत्व होना चाहिए। मेरे उदाहरण में, मैं display: inline के साथ दूसरे div में पाठ के साथ एक कंटेनर div का उपयोग करता हूं।

Answer 4

मैं मेरे लाइन (सीएसएस वर्गों के माध्यम से) द्वारा पाठ ब्लॉक काटना, उपयोग करें और यह टिप्पणी करने के लिए स्वतंत्र लग रहा है की अनुमति देने के इस छोटे से jQuery कोड बनाया है।

यहां jsFiddle है, जिसमें चार गिनती या शब्द गणना द्वारा ट्रंकेट फ़ंक्शन भी शामिल हैं। आप देख सकते हैं कि वर्तमान में, विंडो का आकार बदलना ब्लॉक डिस्प्ले रीफ्रेश नहीं करेगा, मैं इस पर काम कर रहा हूं।

/* 
* Truncate a text bloc after x lines 
* <p class="t_truncate_l_2">Lorem ipsum magna eiusmod sit labore.</p> 
*/ 
$("*").filter(function() { 
    return /t_truncate_l_/.test($(this).attr('class')); 
}).each(function() { 
    var el = $(this); 
    var content = el.text(); 
    var classList = el.attr('class').split(/\s+/); 
    $.each(classList, function(index, item){ 
     if(/^t_truncate_l_/.test(item)) { 
      var n = item.substr(13); 
      var lineHeight = parseInt(el.css('line-height')); 
      if(lineHeight == 1 || el.css('line-height') == 'normal') 
       lineHeight = parseInt(el.css('font-size')) * 1.3; 
      var maxHeight = n * lineHeight; 
      var truncated = $.trim(content); 
      var old; 
      if(el.height() > maxHeight) 
       truncated += '...'; 
      while(el.height() > maxHeight && old != truncated) { 
       old = truncated; 
       truncated = truncated.replace(/\s[^\s]*\.\.\.$/, '...'); 
       el.text(truncated); 
      } 
     } 
    }); 
}); 

Answer 5

tl; डॉ - अपने कंटेनर div पर एक ऊंचाई सेट और फिर का उपयोग jQuery dotdotdot plugin

था के बारे में एक प्लगइन में @Andy E की भयानक उदाहरण बनाने के लिए है, लेकिन फिर एहसास हुआ https://github.com/BeSite/jQuery.dotdotdot इस बंद खींच सकता है । हमारा उपयोग मामला है कि हम डेस्कटॉप चौड़ाई और मोबाइल/टैबलेट पर दो लाइनों पर एक लाइन दिखाना चाहते हैं।

हमारे सीएसएस सिर्फ एक या दो line-height के हिसाब से और फिर dotdotdot प्लगइन बाकी को संभालने के लिए प्रकट होता है के बराबर करने के लिए कंटेनर div सेट हो जाएगा।

Answer 6

मैं एक छोटे से मॉड्यूल है कि शुद्ध पाठ सामग्री के साथ काम करता बनाया है, कोई नेस्टेड टैग और पाठ युक्त तत्व पर कोई सीएसएस-गद्दी अनुमति दी है (लेकिन यह कार्यक्षमता आसानी से जोड़ा जा सकता है)।

HTML:

<p class="ellipsis" data-ellipsis-max-line-count="3"> 
    Put some multiline text here 
</p> 

जावास्क्रिप्ट/jQuery:

(function() { 

$(document).ready(function(){ 
    store_contents(); 
    lazy_update(1000); 
}); 

// Lazy update saves performance for other tasks... 
var lazy_update = function(delay) { 

    window.lazy_update_timeout = setTimeout(function(){ 

     update_ellipsis(); 

     $(window).one('resize', function() { 
      lazy_update(delay); 
     }); 

    }, delay); 
} 

var store_contents = function(){ 

    $('.ellipsis').each(function(){ 
     var p = $(this); 
     p.data('ellipsis-storage', p.html()); 
    }); 
} 

var update_ellipsis = function(){ 

    $('.ellipsis').each(function(){ 

     var p = $(this); 
     var max_line_count = p.data('ellipsis-max-line-count'); 
     var line_height = p.html('&nbsp').outerHeight(); 
     var max_height = max_line_count*line_height; 
     p.html(p.data('ellipsis-storage')); 
     var p_height = p.outerHeight(); 

     while(p_height > max_height){ 

      var content_arr = p.html().split(' '); 
      content_arr.pop(); 
      content_arr.pop(); 
      content_arr.push('...'); 
      p.html(content_arr.join(' ')); 
      p_height = p.outerHeight(); 
     } 
    }); 
} 

})(); 

मुझे आशा है कि आप इसे पसंद!