आरटीएल

Question

का उपयोग कर बाएं हाथ की ओर टेक्स्ट-ओवरफ्लो इलिप्सिस के साथ कई ब्राउज़र संगतता समस्याएं मेरा लक्ष्य छुपा ओवरफ्लो और एक इलिप्सिस के साथ एक तत्व बनाना है, सिवाय इसके कि मैं बाएं तरफ के पात्रों को छुपाया जाना चाहता हूं और इलिप्सिस भी बाईं तरफ हो। यह सबसे ब्राउज़रों के लिए काम करता है:

सीएसएस:

#mydiv { 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    direction:rtl; 
} 

HTML:

:

<div id="mydiv">foobar foobar foobar</div> 

कौन सा है, जब #mydiv इसकी सामग्री से संकरा है, बाहर की तरह कुछ के रूप में आना चाहिए

... obar foobar

हालांकि, मैं जो कह सकता हूं उससे (और किसी अन्य व्यक्ति को उचित चेतावनी देता है, क्योंकि मैंने direction:rtl कई अन्य स्थानों में समाधान देखा है), केवल एक बड़ा ब्राउज़र जो यह सही ढंग से फ़ायरफ़ॉक्स प्रतीत होता है। सफारी और गूगल क्रोम दोनों पाठ के बाईं ओर अंडाकार स्थापित करेंगे, लेकिन फिर सही पर काट-छांट वैसे भी, इस तरह:

... foobar foob

IE9 और ओपेरा पूरी तरह भ्रमित हो । आईई दाईं ओर छंटनी करता है और टेक्स्ट को इलिप्सिस ओवरलैप करता है। ओपेरा, अब तक का सबसे रचनात्मक, थोड़ी देर के लिए अलग-अलग शब्दों पर ओवरफ्लो दिखाई देगा (जैसे तत्व संकुचित हो जाता है, वह है), फिर बाएं शब्द को छूना शुरू करें, लेकिन दाईं ओर से। यह इलिप्सिस को प्रस्तुत करने में भी असफल रहता है और, मैंने एक प्रयोग में, बाईं ओर सभी ™ चरित्र को भी स्थानांतरित किया। वास्तव में। तो "foobar foobar foobar ™" इस हो जाता है:

™ foob foobar

एक अतिरिक्त नोट के रूप में, एक (अत्यंत कष्टप्रद) वेबकिट ब्राउज़रों के लिए संभावित विकल्प -webkit-rtl-ordering:visual जो बाईं तरफ ट्रंकेटस स्थापित करने के लिए हो सकता है लेकिन यह भी सचमुच उलटे क्रम में वर्ण प्रस्तुत करता है:

...

boofraboof 10

तो ब्राउज़र द्वारा- या किसी प्रकार की अस्पष्ट-सुविधा-स्नीफिंग कोई सैद्धांतिक रूप से उस संपत्ति को सेट कर सकता है और तत्व के पाठ को गतिशील रूप से उलट सकता है।

क्या कोई साधारण क्रॉस-ब्राउज़र वर्कअराउंड है, या यहां तक ​​कि एक जटिल, जेएस-आधारित एक भी है?

Answer 1

आपकी समस्या के लिए जेएस/जेक्री आधारित समाधान हैं। एक चेतावनी यह है कि वे अधिक महंगी हैं। यदि आप अपने पृष्ठ पर बदलावों का एक गुच्छा नहीं बना रहे हैं तो निम्नलिखित समाधानों को ठीक काम करना चाहिए।

Dotdotdot: http://dotdotdot.frebsite.nl/

ThreeDots http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

संपादित करें: बस स्पष्ट होना, मैं एक ही समस्या है कि आपने उल्लेख किया है दिखाई दे रही है।