दिलचस्प पोस्ट
ऑपरेशन में 1 कॉलम होना चाहिए – MySQL नहीं है जावास्क्रिप्ट में सॉर्ट करना: क्या प्रत्येक फंक्शन में "रिटर्न 0" कथन है? वसंत MVC @ResponseBody विधि में स्ट्रिंग लौटने में HTTP 400 त्रुटि के साथ कैसे प्रतिक्रिया दें? पहचान करने के लिए jQuery प्राप्त करना .change () IE में शरीर पर सेट CSS3 ढाल पृष्ठभूमि खिंचाव नहीं है बल्कि इसके बजाय दोहराता है? सी # में "स्थिर विधि" क्या है? अनुक्रमणिका त्रुटि: सीमा से बाहर सूची असाइनमेंट सूची विंडोज 7 पर ओपनसीवी 2.4 और मिनजीड के साथ आरंभ करना मैं अजगर से (विंडो) क्लिपबोर्ड से पाठ कैसे पढ़ूं? कॉलम में एकाधिक मानों के साथ प्रश्न प्रत्यक्ष बनाम नियुक्त – jQuery .on () Google क्रोम में HTTP हेडर देखें? Std :: move () क्या है, और इसका उपयोग कब किया जाना चाहिए? एक धारा से लगातार जोड़े इकट्ठा करें PHP_SELF और XSS

बाईं तरफ पाठ-ओवरफ्लो एलीप्सिस

मेरे पास पथों की एक सूची है (एक बेहतर शब्द की कमी के लिए, संभवतः रोटी का टुकड़ा ट्रेल्स उन्हें बेहतर बताते हैं) कुछ मूलभूत मूल्य उनके माता-पिता में प्रदर्शित होने के लिए बहुत लंबा हैं इसलिए मैं text-overflow: ellipsis का उपयोग कर रहा हूं text-overflow: ellipsis समस्या यह है कि महत्वपूर्ण जानकारी सही पर है, इसलिए मुझे लगता है कि अंडाकार बाईं तरफ दिखाई देगा। ऐसा कुछ ऐसी आस्की कला:

 ---------------------------- |first > second > third | |...second > third > fourth| |...fifth > sixth > seventh| ---------------------------- 

ध्यान दें कि पहली पंक्ति बहुत कम है, इसलिए यह बायां गठबंधन बनी हुई है, लेकिन दूसरे दो बहुत लंबा हैं इसलिए बाएं हाथ की तरफ इलिप्सिस दिखाई देता है

मैं एक सीएसएस ही समाधान पसंद करता था, लेकिन जेएस से ठीक नहीं किया जा सकता है। यह ठीक है अगर समाधान केवल फ़ायरफ़ॉक्स और क्रोम में काम करता है

संपादित करें: इस समय मैं क्रोम में बग के लिए एक काम की तलाश कर रहा हूं जो इसे ठीक से रेंडर करने से रोकता है जब कोई दस्तावेज़ मिश्रित आरटीएल और एलटीआर होता है। यह सब मैं वास्तव में शुरू से ही आवश्यक था, मुझे अभी पता नहीं था।

वेब के समाधान से एकत्रित समाधान "बाईं तरफ पाठ-ओवरफ्लो एलीप्सिस"

कैसे इस तरह कुछ jsFiddle ? बाईं तरफ ellipsis प्राप्त करने के लिए यह दिशा, पाठ-संरेखित और पाठ-अतिप्रवाह का उपयोग करता है एमडीएन के मुताबिक, left-overflow-type मान के साथ भविष्य में बाईं ओर अंडाकार को निर्दिष्ट करने की संभावना हो सकती है, लेकिन यह अभी भी प्रयोगात्मक माना जाता है।

सीएसएस:

 p { white-space: nowrap; overflow: hidden; /* "overflow" value must be different from "visible" */ text-overflow: ellipsis; width:170px; border:1px solid #999; direction:rtl; text-align:left; } 

HTML:

 <p>first > second > third<br /> second > third > fourth > fifth > sixth<br /> fifth > sixth > seventh > eighth > ninth</p>​ 

मुझे अंत में जावास्क्रिप्ट में कुछ दरार और कुछ करना पड़ा। मैं उम्मीद कर रहा था कि कोई ओले-सीरीज़ सीएसएस समाधान के साथ आएगा, लेकिन लोगों को सिर्फ जवाब देने के लिए लगता है, जो सही होना चाहिए अगर यह क्रोम के बगों के लिए नहीं है। j08691 अपने काम के लिए बकाया हो सकता है

 <html> <head> <style> #container { width: 200px; border: 1px solid blue; } #container div { width: 100%; overflow: hidden; white-space: nowrap; } </style> <script> function trimRows() { var rows = document.getElementById('container').childNodes; for (var i=0, row; row = rows[i]; i++) { if (row.scrollWidth > row.offsetWidth) { var textNode = row.firstChild; var value = '...' + textNode.nodeValue; do { value = '...' + value.substr(4); textNode.nodeValue = value; } while (row.scrollWidth > row.offsetWidth); } } } </script> </head> <body onload='trimRows();'> <div id="container" > <div>first > second > third</div> <div>second > third > fourth > fifth > sixth</div> <div>fifth > sixth > seventh > eighth > ninth</div>​ </div> </body> </html> 

बेला

यह थोड़ा छोटी गाड़ी है, लेकिन सही दिशा में शायद एक बिंदु

http://jsfiddle.net/HerrSerker/ZfbaD/50/

 <div class="container"> <span class="part">second</span> <span class="part">&gt;</span> <span class="part">third</span> <span class="part">&gt;</span> <span class="part">fourth</span> <span class="part">&gt;</span> <span class="part">fifth</span> <span class="part">&gt;</span> <span class="part">sixth</span> </div> 

 ​.container { white-space: nowrap; overflow: hidden; /* "overflow" value must be different from "visible" */ text-overflow: ellipsis; width:170px; border:1px solid #999; direction:rtl; } .container .part { direction:ltr; } 

क्यों न सिर्फ direction:rtl; का उपयोग direction:rtl;

@Hemlocks, @Brian Mortenson और @ Jimbo के समाधान का उपयोग करना, मैंने इस समस्या को हल करने के लिए एक jQuery प्लगइन बनाया है।

मैंने भी मौजूदा आंतरिक एचटीएमएल वापस आने के बजाय .html () का प्रयोग करके शुरुआती मान को वापस करने के लिए समर्थन भी जोड़ा है। उम्मीद है कि यह किसी के लिए उपयोगी होगा …

 (function($) { $.trimLeft = function(element, options) { var trim = this; var $element = $(element), // reference to the jQuery version of DOM element element = element; // reference to the actual DOM element var initialText = element.innerHTML; trim.init = function() { overrideNodeMethod("html", function(){ return initialText; }); trimContents(element, element); return trim; }; trim.reset = function(){ element.innerHTML = initialText; return trim; }; //Overide .html() to return initialText. var overrideNodeMethod = function(methodName, action) { var originalVal = $.fn[methodName]; var thisNode = $element; $.fn[methodName] = function() { if (this[0]==thisNode[0]) { return action.apply(this, arguments); } else { return originalVal.apply(this, arguments); } }; }; var trimContents = function(row, node){ while (row.scrollWidth > row.offsetWidth) { var childNode = node.firstChild; if (!childNode) return true; if (childNode.nodeType == document.TEXT_NODE){ trimText(row, node, childNode); } else { var empty = trimContents(row, childNode); if (empty){ node.removeChild(childNode); } } }; }; var trimText = function(row, node, textNode){ var value = '\u2026' + textNode.nodeValue; do { value = '\u2026' + value.substr(4); textNode.nodeValue = value; if (value == '\u2026'){ node.removeChild(textNode); return; } } while (row.scrollWidth > row.offsetWidth); }; trim.init(); }; $.fn.trimLeft = (function(options){ var othat = this; var single = function(that){ if (undefined == $(that).data('trim')) { var trim = new $.trimLeft(that, options); $(that).data('trim', trim); $(window).resize(function(){ $(that).each(function(){ trim.reset().init(); }); }); } }; var multiple = function(){ $(othat).each(function() { single(this); }); }; if($(othat).length>1) multiple(othat); else single(othat); //----------- return this; }); })(jQuery); 

का उपयोग आरंभ करें:

 //Call on elements with overflow: hidden and white-space: nowrap $('#container>div').trimLeft(); //Returns the original innerHTML console.log($('#test').html()); 

बेला

थोड़ी अधिक जटिल मार्कअप का उपयोग करना (एडीपी के लिए बीडीआई टैग और एक अतिरिक्त अवधि का उपयोग करना), हम इस समस्या को सीएसएस में पूरी तरह से हल कर सकते हैं, कोई भी जेएस आवश्यक नहीं है – क्रॉस ब्राउज़र (आईई, एफएफ, क्रोम) और विराम चिह्न सही करने के लिए अंक:

http://jsbin.com/dodijuwebe/1/edit?html,css,output

दीक्षित, यह एक हैक के कुछ है, छद्म-तत्व अच्छाई शामिल है। हालांकि, हमारी टीम उत्पादन में इस कोड का उपयोग कर रही है और हमारे पास कोई भी समस्या नहीं है।

केवल चेतावनियां हैं: रेखा की ऊंचाई तय की जानी चाहिए और पृष्ठभूमि रंग को स्पष्ट रूप से जाना चाहिए (वारिस काम नहीं करेगा)।

यदि आप उन ग्रंथों के अनुक्रमण की परवाह नहीं करते हैं, तो आप इस पद्धति का उपयोग कर सकते हैं (यह टेक्स्ट लाइनों को उलट देता है):

अगर आपके ग्रंथों में अन्य HTML तत्वों के अलावा <br> आप को इस विधि का उपयोग करने के लिए कुछ व्यवस्था करने की आवश्यकता है

HTML कोड:

 <p>first > second > third<br/> second > third > fourth <br> fifth > sixth > seventh</p> 

सीएसएस कोड:

 p{ overflow: hidden; text-overflow: ellipsis; unicode-bidi: bidi-override; direction: rtl; text-align: left; white-space: nowrap; width: 140px; } 

जावास्क्रिप्ट कोड

 [].forEach.call(document.getElementsByTagName("p"), function(item) { var str = item.innerText; //Change the operators str = str.replace(/[<>]/g, function(char){ return ({"<" : ">", ">" : "<"})[char] }); //Get lines var lines = str.split(/\n/); //Reverse the lines lines = lines.map(function(l){ return l.split("").reverse().join("") }); //Join the lines str = lines.join("<br>"); item.innerHTML = str; }); 

jsfiddle

आपके संपादन के आधार पर:

इस समय मैं क्रोम में कीड़े के लिए एक काम की तलाश कर रहा हूं जो इसे ठीक से रेंडर करने से रोकता है जब कोई दस्तावेज़ मिश्रित आरटीएल और एलटीआर होता है। यह सब मैं वास्तव में शुरू से ही आवश्यक था, मुझे अभी पता नहीं था।

क्या आपने unicode-bidi सीएसएस संपत्ति ( साइटपॉइंट या डब्ल्यू 3 सी ) को देखा है? मैं वास्तव में सिर्फ एक और हाल के पोस्ट पर इस बारे में सीखा। मेरा अनुमान है कि आप उन टुकड़ों के लिए embed मूल्य का उपयोग करना चाहते हैं, जो मुख्य साइट पर विपरीत दिशा में जा रहे हैं। इसलिए j08691 के उत्तर में जहां direction: rtl unicode-bidi: embed बिड़ी जोड़ें unicode-bidi: embed सीएसएस पर unicode-bidi: embed करें। यह "मिश्रित आरटीएल और एलटीआर" मुद्दों को हल करना चाहिए जिन्हें आप कर रहे हैं।

तीन वस्तुओं को फिर से इकट्ठा करने के लिए कुछ आवश्यक जावास्क्रिप्ट डाल दिया और आवश्यक कहां में एलीपिसिस जोड़ दिया। यह स्पष्ट रूप से नहीं दिखता कि बॉक्स में कितना टेक्स्ट फिट होगा लेकिन अगर बॉक्स ठीक हो गया है तो यह समस्या नहीं हो सकती है।

 <style> p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:170px; border:1px solid #999; direction:rtl; text-align:left; } </style> <p>first &gt; second &gt; third<br /> second &gt; third &gt; fourth &gt; fifth &gt; sixth<br /> fifth &lt; sixth &lt; seventh &lt; eighth &lt; ninth</p> <script> var text = $( 'p' ).text(), split = text.split( '\n' ), finalStr = ''; for( i in split ){ finalStr = finalStr.length > 0 ? finalStr + '<br />' : finalStr; var match = /(\w+\s?(<|>)?\s?){3}$/.exec( split[i] ); finalStr = finalStr + ( split[i].length > match[0].length ? '...' : '' ) + match[0]; } $( 'p' ).empty().html( finalStr ); </script>