दिलचस्प पोस्ट
जावास्क्रिप्ट के साथ दिनांक युक्त सुधार कोड जावास्क्रिप्ट के साथ क्वेरी स्ट्रिंग कैसे बनाएं आर में सूचियों का सही उपयोग कैसे करें? ट्रेस पायथन आयात डिफ़ॉल्ट के प्रकारबद्ध प्रोग्राम (प्रकार) प्रोग्रामेटिक रूप से प्रवेश द्वार और सबनेट मुखौटा विवरण प्राप्त करना विदेशी वर्णों को उनके सामान्य समकक्षों में बदलें Cmake "link_directories" का उपयोग कर पुस्तकालय नहीं ढूँढ सकता म्कक के साथ एचटीटीपी कंटेंटेबबेस मजाक करना धागा संदर्भ स्विच बनाम प्रक्रिया संदर्भ स्विच Imshow: हद और पहलू Excel JSF और प्राइमफैसेस में निर्यात करें अजगर नेस्टेड फ़ंक्शन बंद क्यों नहीं किए गए हैं? एक इकाई के अंदर इकाई प्रबंधक प्राप्त करें सी + + संकलन बग?

मैं सीएसएस के साथ एक छोटे फिक्स्ड कॉलम में लंबा टेक्स्ट कैसे इंगित कर सकता हूं?

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

दिए गए स्ट्रिंग:

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

निर्धारित चौड़ाई-कॉलम में इच्छित उत्पादन होना चाहिए:

 Some really long string... 

Solutions Collecting From Web of "मैं सीएसएस के साथ एक छोटे फिक्स्ड कॉलम में लंबा टेक्स्ट कैसे इंगित कर सकता हूं?"

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

 .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 */ } 

नोट: आप नवीनतम ब्राउज़र समर्थन पर जांच करना चाहते हैं।

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

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

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

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

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

यदि आप समझदारी का उपयोग कर रहे हैं, तो इस तरह से मैंने इस समस्या का हल निकाला है:

 {$my_string|truncate:60} 

यहाँ एक फ़ंक्शन है जिसका उपयोग मैं तारों को छोटा करना चाहता हूं। यहां अधिकांश सुझावों की तरह, यह स्ट्रिंग को छोटा करने के लिए उपस्ट्रक्चर का उपयोग करता है, लेकिन यह स्ट्रिंग मध्य-शब्द को विभाजित करने से बचना होगा:

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

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

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

  1. पहले अपना मार्कअप तैयार करें:

     <p id="abc">{TEXT}</p> 

    जहां आपका टेक्स्ट 150 वर्ण + को छोटा कर दिया गया है ...

  2. अब जब हमें जावास्क्रिप्ट के लिए एक अच्छा आधार मिल गया है, तो हम जो भी आप चाहते हैं उसे बनाने का प्रयास कर सकते हैं:

     <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>