सीएसएस के साथ लंबे तार काट रहे हैं: अभी तक संभव है?

Question

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

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

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

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

Comments

2014: एक अप-टू-डेट उत्तर देखें stackoverflow.com/questions/802175/…

— Adrien Be

संबंधित: एलिप्सिस को मल्टीलाइन टेक्स्ट पर लागू करना

— माइकल बेंजामिन

HTML टैग में ईलिप्सिस (...)

— नईम शेख

Answer 1

अपडेट: text-overflow: ellipsisअब फ़ायरफ़ॉक्स 7 (27 सितंबर 2011 को रिलीज़) के रूप में समर्थित है । वाह! मेरा मूल उत्तर एक ऐतिहासिक रिकॉर्ड के रूप में है।

जस्टिन मैक्सवेल के पास क्रॉस सीएसएस समाधान है। यह नकारात्मक पक्ष के साथ आता है क्योंकि पाठ को फ़ायरफ़ॉक्स में चयनित करने की अनुमति नहीं देता है। की जाँच करें मैट स्नाइडर के ब्लॉग पर अपने अतिथि पोस्ट यह कैसे काम करता पूर्ण विवरण के लिए।

ध्यान दें कि यह तकनीक 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>

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

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

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);
    }
};

यह कैसे काम करता है, इसकी व्याख्या के लिए मैट स्नाइडर की पोस्ट देखें ।

Comments

यह कमाल है, इसे इंगित करने के लिए धन्यवाद! अचयनित पाठ और इस बात पर प्रतिबंध कि किस सामग्री में छंटनी की जा सकती है शर्म की बात है, लेकिन आम तौर पर यह एक अच्छा समाधान की तरह दिखता है।

— सैम स्टोक्स

केवल वास्तविक हताशा की वजह से मुझे लगता है कि रिक्त स्थान को & nbsp; के रूप में प्रस्तुत किया गया है; इसलिए इंडेंटेशन वास्तव में संभव नहीं है ... = /

— माचिस

मैं भी इसी समस्या को लेकर भागा। मुझे विश्वास नहीं हो रहा है कि फ़ायरफ़ॉक्स अभी तक किसी भी रूप में इसका समर्थन नहीं करता है।

— mcjabberz

क्या यह दृष्टिकोण Webkit और IE8 पर चयन नियंत्रण के वैकल्पिक तत्वों पर किसी के लिए भी काम करता है। वेबकॉट मेरे और IE8 के लिए कुछ भी नहीं कर रहा है, इसे केवल दीर्घवृत्त के बिना क्लिप करता है।

— रजत

के लिए माइक्रोसॉफ्ट के प्रलेखन text-overflowके लिए समर्थन नहीं का द्योतक नहीं है optionतत्वों (देखें करने के लिए लागू होता है पर खंड msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx )।

— साइमन लीशके ने

Answer 2

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

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

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

-Ms-text-overflow CSS property जरूरी नहीं है: यह text-overflow CSS property का पर्याय है, लेकिन IE के 6 से 11 संस्करण पहले से ही text-overflow CSS property को सपोर्ट करते हैं।

वेब ब्राउज़र के लिए Windows OS पर सफलतापूर्वक (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 पाठ-ओवरफ़्लो दीर्घवृत्त का पता लगाने और HTML - मैं केवल तभी टूलिप को दिखा सकता हूं जब ellipsis सक्रिय हो।

संसाधन:

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

Comments

@chiragpatel इस लाइव डेमो jsbin.com/leyukama/1 का

— Adrien Be

FF7 <रुचि रखने वाले किसी भी व्यक्ति के लिए आजकल फ़ायरफ़ॉक्स उपयोगकर्ताओं का 0,05% है

— टॉम टॉम

Answer 3

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

Comments

यह निश्चित रूप से उपयोगी है, धन्यवाद! फ़ायरफ़ॉक्स को छोड़कर सभी ब्राउज़रों की तरह लगता है कि सीएसएस संपत्ति का समर्थन करता है, इसलिए इस प्लगइन के साथ, केवल वही लोग काम नहीं करेंगे जो फ़ायरफ़ॉक्स उपयोगकर्ता हैं, जिन्होंने जावास्क्रिप्ट को निष्क्रिय कर दिया है - और यह वैसे भी एक सुंदर गिरावट है। किसी भी विचार के प्रदर्शन के निहितार्थ क्या हैं?

— सैम स्टोक्स

नहीं, क्षमा करें ... मैंने वास्तविक जीवन में कोड का उपयोग नहीं किया है, बस डेमो के साथ खेला गया है। डेमो को लेना आसान होगा और एक ही पृष्ठ में इसे सौ बार कट और पेस्ट करना होगा।

— रिचीइंडल

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

— मथायस

@ मैथियास: शायद आपने इसे जांचे जाने के बाद से कोड अपडेट किया गया है, लेकिन मैंने सिर्फ डेमो पर ध्यान दिया है और यह पूरी तरह से एक चर-चौड़ाई के फ़ॉन्ट के साथ काम करता है।

— रिचीहिंडले

Answer 4

ठीक है, फ़ायरफ़ॉक्स 7 ने भी लागू text-overflow: ellipsisकिया text-overflow: "string"। 2011-09-27 के लिए अंतिम रिलीज की योजना है।

Answer 5

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

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

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

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

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

Comments

छद्म कोड के साथ समस्या यह है कि "..." अभी भी कट जाता है या छिप जाता है यदि पाठ अतिप्रवाह करता है। मैं उम्मीद कर रहा था कि यदि पाठ ओवरफ्लो होता है, तो यह सुनिश्चित किया जाएगा कि "..." दिखाया जाए। स्पष्ट रूप से, यह मामला नहीं है :(

— एंटनी

@Antony बस छद्म तत्व की स्थिति: position: absolute; right: 0;(और position: relativeकाम करने के लिए वास्तविक तत्व पर मत भूलना )। यह पाठ के साथ ओवरलैप करेगा हालांकि आप एक पृष्ठभूमि रंग भी जोड़ना चाह सकते हैं।

— अंतिम बच्चे