मैं सीएसएस के साथ एक छोटे से तय कॉलम में लंबे पाठ को कैसे इंगित करूं?

मैं एक निश्चित चौड़ाई कॉलम में लंबे टेक्स्ट को कैसे फिट करूं जहां मेरे पास टेक्स्ट की केवल एक पंक्ति के लिए कमरा है? पाठ को एक निश्चित चौड़ाई (100px से कहें) पर कटौती की आवश्यकता है और मैं अंत में बिंदुओं को "..." जोड़ना चाहता हूं। उदाहरण के लिए कुछ इस तरह:मैं सीएसएस के साथ एक छोटे से तय कॉलम में लंबे पाठ को कैसे इंगित करूं?

को देखते हुए स्ट्रिंग:

Some really long string that I need to fit in there!

निश्चित-चौड़ाई-स्तंभ में

वांछित उत्पादन किया जाना चाहिए:

Some really long string...

स्रोत

2010-01-21 Primoz Rome

तुम अकेले सीएसएस के साथ ऐसा कर सकते हैं:

.box { 
    -o-text-overflow: ellipsis; /* Opera */ 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
    overflow:hidden;    /* don't show excess chars */ 
    white-space:nowrap;   /* force single line */ 
    width: 300px;     /* fixed width */ 
}

ध्यान दें: आप नवीनतम ब्राउज़र समर्थन पर जाँच करना चाहते हैं जाएगा।

स्रोत

2010-01-21 12:12:17 Gordon

कूल! मैंने आपके उत्तर को देखने से पहले एक तरह का काम करने वाला समाधान तैयार किया। https: //gist.github।कॉम/708155 – geon

यह: "टेक्स्ट-ओवरफ्लो: इलिप्सिस;" आईई, ओपेरा, फ़ायरफ़ॉक्स, क्रोम और सफारी के सभी मौजूदा संस्करणों में अब सब कुछ जरूरी है, इसलिए पुराने ब्राउज़र समर्थन के लिए केवल काम के आस-पास (और "-o-text-overflow:") की आवश्यकता है। – GazB

एक बहु-पंक्ति पाठ समाधान के बारे में क्या? यह केवल पाठ की एक पंक्ति के लिए काम करेगा। उदाहरण के लिए यदि मैं पाठ की 3 पंक्तियों के लिए जगह लेता हूं और मैं चाहता हूं कि '...' को अंतिम पंक्ति में जोड़ा गया है जहां टेक्स्ट फिसल गया है? –

मैं एक ऐसी ही समस्या थी, जिस तरह से मैं हल यह था स्ट्रिंग को 60 वर्णों तक सीमित करने और इसके अंत में '...' जोड़ना।

एक बदसूरत समाधान? हां, लेकिन जब तक कोई jQuery समाधान नहीं होता है, तो शायद यह आपकी सबसे अच्छी शर्त है।

{$my_string|truncate:60}

स्रोत

2010-01-21 11:24:50

यहाँ एक समारोह मैं तार काट-छांट करने के लिए उपयोग:

आप चतुर का उपयोग कर रहे हैं, यह मैं कैसे समस्या हल है। सुझाव यहाँ के सबसे की तरह, यह स्ट्रिंग को काटना substr का उपयोग करता है, लेकिन यह स्ट्रिंग के मध्य शब्द बंटवारे से बचने जाएगा:

function truncate_text($string, $min_chars, $append = ' &hellip;') { 
    $chars = strpos($string, " ", $min_chars); 
    $truncated_string = substr($string, 0, $chars) . $append; 
    return $truncated_rstring; 
}

स्रोत

2010-01-21 11:46:48

मुझे लगता है कि एन पात्रों के बाद सरल काटने पाठ नहीं है आप जो खोज रहे हैं । यह समाधान नहीं है क्योंकि निम्न पाठ में 15 वर्ण लंबाई दोनों हैं: iiiiiiiiiiiiiii, mmmmmmmmmmmmmmm - ध्यान दें कि दूसरा "शब्द" पहले की तुलना में लगभग तीन गुना लंबा है।

जावास्क्रिप्ट एक समाधान हो सकता है:

पहले तैयार अपनी छाप-अप:
```
<p id="abc">{TEXT}</p> 
```
कहाँ {TEXT} अपने पाठ + ...

150 वर्णों तक छोटा किया गया है अब जब हम जावास्क्रिप्ट के लिए एक अच्छा आधार मिला है जिसे हम आप जो खोज रहे हैं उसे बनाने का प्रयास कर सकते हैं:

<html> 
<head> 
    <style type="text/css"> 
     #abc { 
      width: 100px; 
     } 
    </style> 
    <script type="text/javascript"> 
     document.addEventListener("DOMContentLoaded", function() { 
      var ref = document.getElementById("abc"); 
      var text = ref.text; 

      ref.removeChild(ref.firstChild); 
      ref.appendChild(document.createTextNode("...")); 

      var maxHeight = ref.offsetHeight; 

      var pos = 0; 
      while (ref.offsetHeight <= maxHeight) { 
       var insert = text.substring(0, ++pos) + "..."; 

       var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild); 
      } 

      ref.replaceChild(finalReplace, ref.firstChild); 
     }, false); 
    </script> 
</head> 
<body> 
    <p id="abc">My very, very, very, very, very, very, very long text...</p> 
</body> 
</html>

स्रोत

2010-01-21 11:48:21 Crozin

बस कुछ सीएसएस के साथ गॉर्डन के जवाब की तरह। बस <a> या <p> की तरह एक इनलाइन तत्व के लिए display:block संपत्ति कहा:

a#myText{ 
    display: block; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 300px; 
}

आप इसे कई ब्राउज़र के साथ इस्तेमाल कर सकते हैं जैसे आप इस लिंक पर देख सकते हैं: http://caniuse.com/#search=text-overflow

स्रोत

2014-09-04 10:39:50

मैं सीएसएस के साथ एक छोटे से तय कॉलम में लंबे पाठ को कैसे इंगित करूं?

उत्तर

संबंधित मुद्दे