सीएसएस के साथ लंबे तारों को छेड़छाड़ करना अभी तक व्यवहार्य है?

Question

क्या सादा एचटीएमएल और सीएसएस के साथ पाठ को छेड़छाड़ करने का कोई अच्छा तरीका है, ताकि गतिशील सामग्री एक निश्चित चौड़ाई और ऊंचाई लेआउट में फिट हो सके?

मैं तार्किक (चौड़ाई पात्रों में से यानी एक आँख बंद करके अनुमान लगाया-संख्या) द्वारा सर्वर साइड छोटा किया गया है, लेकिन जब से एक 'w' एक से अधिक व्यापक है 'मैं' इस से इनकी हो जाता है, और यह भी की आवश्यकता है मुझे प्रत्येक निश्चित चौड़ाई के लिए वर्णों की संख्या को फिर से अनुमान लगाने (और tweaking रखना)। आदर्श रूप से ब्राउज़र में छंटनी होती है, जो भौतिक प्रस्तुत पाठ की चौड़ाई जानता है।

मुझे पता चला है कि आईई में text-overflow: ellipsis संपत्ति है जो वास्तव में मैं चाहता हूं, लेकिन मुझे इसे क्रॉस-ब्राउज़र होने की आवश्यकता है। यह गुण seems to be (somewhat?) standard लेकिन फ़ायरफ़ॉक्स द्वारा समर्थित नहीं है। मुझे variousworkaroundsoverflow: hidden पर आधारित है, लेकिन वे या तो एक एलीप्सिस प्रदर्शित नहीं करते हैं (मैं चाहता हूं कि उपयोगकर्ता सामग्री को छोटा कर दें), या इसे हर समय प्रदर्शित करें (भले ही सामग्री को छोटा नहीं किया गया हो)।

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

Answer 1

अद्यतन:text-overflow: ellipsis is now supported Firefox 7 के रूप में (जारी किया सितंबर 27 वें 2011)। वाह! मेरा मूल उत्तर ऐतिहासिक रिकॉर्ड के रूप में आता है।

जस्टिन मैक्सवेल क्रॉस ब्राउज़र सीएसएस समाधान है। फ़ायरफ़ॉक्स में टेक्स्ट को चुनने की इजाजत नहीं देने के बावजूद यह नकारात्मकता के साथ आता है। यह कैसे काम करता है इस बारे में पूरी जानकारी के लिए his guest post on Matt Snider's blog देखें।

नोट यह तकनीक फ़ायरफ़ॉक्स में innerHTML संपत्ति का उपयोग कर जावास्क्रिप्ट में नोड की सामग्री को अपडेट करने से रोकती है। वर्कअराउंड के लिए इस पोस्ट का अंत देखें।

सीएसएस

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); 
} 

ellipsis.xml फ़ाइल सामग्री

<?xml version="1.0"?> 
<bindings 
    xmlns="http://www.mozilla.org/xbl" 
    xmlns:xbl="http://www.mozilla.org/xbl" 
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
> 
    <binding id="ellipsis"> 
     <content> 
      <xul:window> 
       <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description> 
      </xul:window> 
     </content> 
    </binding> 
</bindings> 

अद्यतन कर रहा है नोड सामग्री

एक तरीका है कि फ़ायरफ़ॉक्स उपयोग में काम करता है में एक नोड की सामग्री को अद्यतन करने के फोल lowing:

var replaceEllipsis(node, content) { 
    node.innerHTML = content; 
    // use your favorite framework to detect the gecko browser 
    if (YAHOO.env.ua.gecko) { 
     var pnode = node.parentNode, 
      newNode = node.cloneNode(true); 

     pnode.replaceChild(newNode, node); 
    } 
}; 

देखें Matt Snider's post for an explanation of how this works।

Answer 2

आप एक जावास्क्रिप्ट समाधान के साथ ठीक कर रहे हैं, वहाँ एक jQuery प्लग में एक क्रॉस-ब्राउज़र फैशन में यह करने के लिए - देखने http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/

Answer 3

संदर्भ के लिए, यहां "बग" ट्रैकिंग text-overflow: ellipsis support in Firefox पर एक लिंक है। फ़ायरफ़ॉक्स की तरह लगता है कि एकमात्र प्रमुख ब्राउज़र छोड़ा गया है जो देशी सीएसएस समाधान का समर्थन नहीं करता है।

Answer 4

समस्या के लिए एक अन्य समाधान सीएसएस नियमों के निम्नलिखित सेट हो सकता है:

.ellipsis{ 
white-space:nowrap; 
overflow:hidden; 
} 

.ellipsis:after{ 
    content:'...'; 
} 

ऊपर सीएसएस के साथ ही दोष यह है कि यह जोड़ना होगा कि "..."भले ही पाठ-कंटेनर को ओवरफ्लो करता है या नहीं। फिर भी, यदि आपके पास कोई ऐसा मामला है जहां आपके पास तत्वों का समूह है और यह सुनिश्चित है कि सामग्री अधिक हो जाएगी, तो यह नियमों का एक सरल सेट होगा।

मेरा । दो सेंट सलाम जस्टिन मैक्सवेल

Answer 5

ठीक से मूल तकनीक के लिए रवाना, Firefox 7 text-overflow: ellipsis रूप में अच्छी तरह text-overflow: "string" के रूप में लागू अंतिम रिलीज़ 2011-09-27 के लिए योजना बनाई है

Answer 6

2014 मार्च:।। के साथ लंबे समय तार छोटा किया जा रहा सीएसएस: ब्राउज़र समर्थन पर ध्यान केंद्रित करने वाला एक नया उत्तर

डेमो http://jsbin.com/leyukama/1/ पर (मैं jsbin का उपयोग करता हूं क्योंकि यह आईई के पुराने संस्करण का समर्थन करता है)।

<style type="text/css"> 
    span { 
     display: inline-block; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis;  /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/ 
     -o-text-overflow: ellipsis; /** Opera 9 & 10 **/ 
     width: 370px; /* note that this width will have to be smaller to see the effect */ 
    } 
</style> 

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span> 

एमएस-पाठ-अतिप्रवाह सीएसएस संपत्ति आवश्यक नहीं है: यह पाठ-अतिप्रवाह सीएसएस संपत्ति का एक पर्याय है, लेकिन 6 से 11 से IE के संस्करणों को पहले से ही पाठ-अतिप्रवाह सीएसएस संपत्ति समर्थन करते हैं।

सफलतापूर्वक, विंडोज ओएस पर (Browserstack.com पर) का परीक्षण किया वेब ब्राउज़र के लिए:

• IE6 IE11
• ओपेरा 10.6, ओपेरा 11.1, ओपेरा 15.0, ओपेरा 20.0
• क्रोम 14, क्रोम के लिए 20, क्रोम 25
• सफारी 4.0, सफारी 5.0, सफारी 5.1
• फ़ायरफ़ॉक्स 7.0, फ़ायरफ़ॉक्स 15

फ़ायरफ़ॉक्स: जैसा कि साइमन लिस्केके ​​(दूसरे उत्तर में) द्वारा इंगित किया गया है, फ़ायरफ़ॉक्स केवल फ़ायरफ़ॉक्स 7 से टेक्स्ट-ओवरफ्लो सीएसएस प्रॉपर्टी का समर्थन करता है (27 सितंबर 2011 को जारी किया गया)।

मैंने फ़ायरफ़ॉक्स 3.0 & फ़ायरफ़ॉक्स 6.0 (टेक्स्ट-ओवरफ़्लो समर्थित नहीं है) पर इस व्यवहार को दोहराया है।

मैक ओएस वेब ब्राउज़र पर कुछ और परीक्षण की आवश्यकता होगी।

नोट: यदि आप जब एक अंडाकार, लागू किया जाता है यह जावास्क्रिप्ट के माध्यम से किया जा सकता है माउस हॉवर पर एक टूलटिप दिखाने के लिए चाहते हो सकता है, इस सवाल देखें: HTML text-overflow ellipsis detection और HTML - how can I show tooltip ONLY when ellipsis is activated

संसाधन:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Answer 7

.truncate { 
    width: 250px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}