पाठ-अतिप्रवाह: फ़ायरफ़ॉक्स 4 में दीर्घवृत्त? (और FF5)

Question

text-overflow:ellipsis;सीएसएस संपत्ति कुछ चीजें हैं जो माइक्रोसॉफ्ट वेब के लिए सही किया है में से एक होना चाहिए।

अन्य सभी ब्राउज़र अब इसका समर्थन करते हैं ... फ़ायरफ़ॉक्स को छोड़कर।

फ़ायरफ़ॉक्स डेवलपर्स 2005 से इस पर बहस कर रहे हैं, लेकिन इसके लिए स्पष्ट मांग के बावजूद, वे वास्तव में इसे लागू करने के लिए खुद को नहीं ला सकते हैं (यहां तक ​​कि एक प्रयोगात्मक -moz-कार्यान्वयन पर्याप्त होगा)।

कुछ साल पहले, किसी ने फ़ायरफ़ॉक्स 3 को हैक करने का एक तरीका काम किया ताकि वह एक दीर्घवृत्त का समर्थन कर सके । हैक -moz-bindingXUL का उपयोग करके इसे लागू करने के लिए सुविधा का उपयोग करता है। काफी साइटें अब इस हैक का उपयोग कर रही हैं।

बुरी ख़बरें? फ़ायरफ़ॉक्स 4 फीचर को हटा रहा है-moz-binding , जिसका अर्थ है कि यह हैक किसी भी अधिक काम नहीं करेगा।

इसलिए जैसे ही फ़ायरफ़ॉक्स 4 रिलीज़ होता है (बाद में इस महीने, मैं सुनता हूं), हम इस समस्या को वापस लेने जा रहे हैं ताकि यह इस सुविधा का समर्थन करने में सक्षम न हो।

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

[संपादित करें]
बहुत सारे वोट, इसलिए मैं स्पष्ट रूप से केवल वही नहीं हूं जो जानना चाहता हूं, लेकिन मुझे अब तक एक जवाब मिला है जो मूल रूप से 'जावास्क्रिप्ट का उपयोग करता है' कहता है। मैं अभी भी एक ऐसे समाधान की उम्मीद कर रहा हूं, जिसे या तो जेएस की आवश्यकता नहीं होगी, या कम से कम इसे केवल फॉल-बैक के रूप में उपयोग करें जहां सीएसएस फीचर काम नहीं करता है। इसलिए मैं इस सवाल का जवाब देने जा रहा हूं, इस मौके पर कि किसी ने, कहीं जवाब मिल गया है।

[संपादित करें]
एक अद्यतन: फ़ायरफ़ॉक्स तेजी से विकास मोड में चला गया है, लेकिन FF5 के बावजूद अब यह सुविधा अभी भी समर्थित नहीं है। और अब जब अधिकांश उपयोगकर्ता FF3.6 से उन्नत हो गए हैं, तो हैक अब कोई समाधान नहीं है। अच्छी खबर मुझे बताया गया है कि यह हो सकता है फ़ायरफ़ॉक्स 6 में जोड़ा जा है, जो नए रिलीज़ शेड्यूल के साथ केवल कुछ महीनों में बाहर हो जाना चाहिए। अगर ऐसा है, तो मुझे लगता है कि मैं इसका इंतजार कर सकता हूं, लेकिन यह शर्म की बात है कि वे इसे जल्द हल नहीं कर सकते थे।

[अंतिम
संस्करण ] मैं देखता हूं कि फ़ायरफ़ॉक्स के "औरोरा चैनल" (यानी विकास संस्करण) में दीर्घवृत्त सुविधा को आखिरकार जोड़ दिया गया है। इसका मतलब यह है कि इसे अब फ़ायरफ़ॉक्स 7 के हिस्से के रूप में जारी किया जाना चाहिए, जो 2011 के अंत की ओर है। राहत क्या है।

यहां उपलब्ध नोट्स जारी करें: https://developer.mozilla.org/en-US/Firefox/Releases/7

Comments

fwiw, अन्य भयानक चीजें जो Microsoft ने वेब के लिए कीं: AJAX, innerHTML, जावास्क्रिप्ट को पर्याप्त निष्ठा के साथ कॉपी करते हुए कि यह वास्तव में विभिन्न ब्राउज़रों में एक ही भाषा थी, भले ही एपीआई बिल्कुल एक जैसे न हों, IE6

— sdleihsshhhc

@sdleihssirhc: IE5.5 -> IE6 संक्रमण वास्तव में एक क्रांति थी। आप उन कुछ लोगों में से एक हैं जिन्हें मैंने देखा है कि सार्वजनिक रूप से उन्हें पहचानते हैं;)।

— मिंगोस

@mingos हाँ, मैं बहुत खुले विचारों वाला और भविष्यनिष्ठ और तेज और बुद्धिमान हूँ।

— 17

@mingos & @sdleihssirhc: प्वाइंट अच्छी तरह से बनाया गया है, और मैं मानता हूं - IE6 अपने दिन में अच्छा था। IE6 के साथ मेरे मुद्दे उस समय कितने अच्छे थे, लेकिन यह वेब पर 10 साल के ठहराव का कारण नहीं था। लेकिन यह IE की अच्छाई या बुराई पर बहस करने की जगह नहीं है। :-) इसके लिए बहुत सी अन्य जगहें हैं। इस बीच, मैं अभी भी ellipsis पर जिद्दी होने के लिए फ़ायरफ़ॉक्स डेवलपर्स के साथ निराश हूँ।

— स्पडली

दुर्भाग्य से अब के लिए कोई सीएसएस समाधान नहीं है। मेरे द्वारा उपयोग किए जाने वाले फ़ॉलबैक समाधान का उपयोग इस संपत्ति के लिए परीक्षण के रूप में अच्छी तरह से नहीं है। आप देख सकते हैं कि UserAgent फ़ायरफ़ॉक्स है और CSS के बजाय जावास्क्रिप्ट लोड करता है

— nunopolonia

Answer 1

स्पडली, आप एक ही चीज jQuery का उपयोग करके एक छोटा सा जावास्क्रिप्ट लिखकर प्राप्त कर सकते हैं:

var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
   // -4 to include the ellipsis size and also since it is an index
   var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4); 
   trimmedText += ellipsis;
   $('#limitedWidthTextBox').val(trimmedText);
}

मैं समझता हूं कि ऐसा कोई रास्ता होना चाहिए कि सभी ब्राउज़र इस (जावास्क्रिप्ट के बिना) मूल रूप से समर्थन करते हैं, लेकिन, इस बिंदु पर हमारे पास यही है।

EDIT इसके अलावा, आप cssउन सभी निश्चित चौड़ाई वाले फ़ील्ड को एक क्लास अटैच करके इसे और अधिक साफ-सुथरा बना सकते हैं fixWidth और फिर कुछ ऐसा कर सकते हैं:

$(document).ready(function() {
   $('.fixWidth').each(function() {
      var limit = 50;
      var ellipsis = "...";
      var text = $(this).val();
      if (text.length > limit) {
         // -4 to include the ellipsis size and also since it is an index
         var trimmedText = text.substring(0, limit - 4); 
         trimmedText += ellipsis;
         $(this).val(trimmedText);
      }
   });
});//EOF

Comments

मैंने आपको +1 दिया है, लेकिन मैं जावास्क्रिप्ट समाधान को स्वीकार करने में संकोच कर रहा हूं जब तक कि कुछ और संभव न हो। मुझे यह देखने के लिए थोड़ा इंतजार करना होगा कि क्या मुझे कोई अन्य उत्तर मिलता है। यदि JS ही एकमात्र विकल्प है, तो अच्छा होगा कि वह अच्छी तरह से खेले text-overflow:ellipsis;जिससे मैं अभी भी अन्य ब्राउज़रों में CSS विकल्प का उपयोग कर सकूं।

— स्पडली

किसी अन्य कार्य समाधान की अनुपस्थिति में, मुझे अनिच्छा से इसे स्वीकार करना होगा। मैं इसे संशोधित करूंगा ताकि यह केवल फ़ायरफ़ॉक्स में चले, इसलिए मैं अन्य ब्राउज़र में CSS फीचर का उपयोग कर सकता हूं। यहां उम्मीद है कि मोज़िला लोग एफएफ 5 के लिए लागू किए गए दीर्घवृत्त प्राप्त कर सकते हैं। सहायता के लिए धन्यवाद।

— स्पडली

नहीं length()होना चाहिए length? यह एक संपत्ति है।

— एलेक्स

एक वर्ण लंबाई चुनना कठिन है जो हर समय काम करता है, खासकर यदि आप चर-चौड़ाई के फ़ॉन्ट का उपयोग कर रहे हैं या ब्राउज़र में पाठ का आकार बढ़ा या घटा दिया है।

— एसपी

Answer 2

EDIT 09/30/2011

FF7 बाहर है, यह बग हल हो गया है और यह काम करता है!

---

EDIT 08/29/2011

यह समस्या हल के रूप में चिह्नित है और एफएफ 7 में उपलब्ध होगी; वर्तमान में 09/27/2011 को रिलीज़ होने के लिए तैयार है।

अपने कैलेंडर को चिह्नित करें और उन सभी हैक को हटाने के लिए तैयार हो जाएं जिन्हें आपने जगह में रखा है।

पुराना

मेरे पास एक और जवाब है: रुको ।

इस मुद्दे को हल करने के लिए एफएफ देव टीम गर्म खोज में है।

उनके पास फ़ायरफ़ॉक्स 6 के लिए अस्थायी फिक्स सेट है।

फ़ायरफ़ॉक्स ६ !! वह कब बाहर आएगा?

वहाँ आसान, काल्पनिक, अति-प्रतिक्रियाशील व्यक्ति। फ़ायरफ़ॉक्स तेजी से देव ट्रैक पर है। FF6 फ़ायरफ़ॉक्स 5 के छह सप्ताह बाद रिलीज़ के लिए सेट है। फ़ायरफ़ॉक्स 5 21 जून, 2011 को रिलीज़ के लिए सेट है।

इसीलिए अगस्त 2011 की शुरुआत में कुछ समय लगा दिया गया।

आप मूल पोस्टर प्रश्न में लिंक से बग के बाद मेलिंग सूची के लिए साइन अप कर सकते हैं।

या आप यहां क्लिक कर सकते हैं ; जो भी आसान है।

Comments

यह hacks.mozilla.org/2011/07/aurora7 का तात्पर्य है कि यह फ़ायरफ़ॉक्स 7 में होगा, न कि 6. लेकिन आपका मुख्य बिंदु ( प्रतीक्षा ) या तो मान्य है।

— मेट्रिक्सफ्रॉग

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

— Spudley

नहीं, यह फ़ायरफ़ॉक्स 7 के लिए स्लेट किया गया है : developer.mozilla.org/en/CSS/…

— क्रिश्चियन

Answer 3

मुझे कहना होगा कि मैं थोड़ा निराश हूं कि मेरे आवेदन में एकमात्र ब्राउज़र विशिष्ट हैक एफएफ 4 का समर्थन करने वाला है। उपरोक्त जावास्क्रिप्ट समाधान चर चौड़ाई फोंट के लिए जिम्मेदार नहीं है। यहां एक अधिक क्रियात्मक स्क्रिप्ट है जो इसके लिए जिम्मेदार है। इस समाधान के साथ बड़ी समस्या यह है कि यदि कोड चलने पर पाठ वाला तत्व छिपा है तो बॉक्स की चौड़ाई ज्ञात नहीं है। यह मेरे लिए एक सौदा ब्रेकर था इसलिए मैंने इस पर काम करना / परीक्षण करना बंद कर दिया ... लेकिन मुझे लगा कि मैं इसे यहाँ पोस्ट करूँगा अगर यह किसी के लिए उपयोग करना है। यह अच्छी तरह से परीक्षण करने के लिए सुनिश्चित करें क्योंकि मेरा परीक्षण थकावट से कम था। मेरा इरादा केवल FF4 के लिए कोड चलाने के लिए एक ब्राउज़र चेक जोड़ने का था और बाकी सभी ब्राउज़रों को उनके मौजूदा समाधान का उपयोग करने देना था।

यह यहाँ उपलब्ध है: http://jsfiddle.net/kn9Qg/130/

HTML:

<div id="test">hello World</div>

सीएसएस:

#test {
    margin-top: 20px;
    width: 68px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid green;
}

जावास्क्रिप्ट (jQuery का उपयोग करता है)

function ellipsify($c){
    // <div $c>                 content container (passed)
    //    <div $b>              bounds
    //       <div $o>           outer
    //          <span $i>       inner
    //       </div>
    //       <span $d></span>   dots
    //    </div>
    // </div>

    var $i = $('<span>' + $c.html() + '</span>');
    var $d = $('<span>...</span>');
    var $o = $('<div></div>');
    var $b = $('<div></div>');

    $b.css( {
        'white-space' : "nowrap",
        'display' : "block",
        'overflow': "hidden"
    }).attr('title', $c.html());

    $o.css({
        'overflow' : "hidden",
        'width' : "100%",
        'float' : "left"
    });

    $c.html('').append($b.append( $o.append($i)).append($d));

    function getWidth($w){
        return parseInt( $w.css('width').replace('px', '') );
    }

    if (getWidth($o) < getWidth($i))
    {
        while (getWidth($i) > (getWidth($b) - getWidth($d)) )
        {
             var content = $i.html();
             $i.html(content.substr(0, content.length - 1));
        }

        $o.css('width', (getWidth($b) - getWidth($d)) + 'px');
    }
    else
    {
        var content = $i.html();
        $c.empty().html(content);
    }
}

इसे इस तरह कहा जाएगा:

$(function(){
    ellipsify($('#test'));
});

Answer 4

मैं इस गोरखधंधे में भाग गया हूं पिछले एक हफ्ते में भी ।

चूंकि स्वीकृत समाधान चर चौड़ाई फोंट के लिए जिम्मेदार नहीं है और wwwhack के समाधान में थोड़ी देर है, मैं अपने $ .02 में फेंक दूंगा।

मैं क्रॉस-गुणा का उपयोग करके अपनी समस्या के प्रसंस्करण समय को काफी कम करने में सक्षम था। मूल रूप से, हमारे पास एक सूत्र है जो इस तरह दिखता है:

चर xइस मामले में जिसे हमें हल करने की आवश्यकता है। जब एक पूर्णांक के रूप में लौटा, तो यह नई लंबाई देगा कि अति-प्रवाह पाठ होना चाहिए। मैंने एलिप्सीज़ को दिखाने के लिए पर्याप्त जगह देने के लिए मैक्सलिफ्ट को 80% तक गुणा किया।

यहाँ एक पूर्ण HTML उदाहरण है:

<html>
    <head>
        <!-- CSS setting the width of the DIV elements for the table columns.  Assume that these widths could change.  -->
        <style type="text/css">
            .div1 { overflow: hidden; white-space: nowrap; width: 80px; }
            .div2 { overflow: hidden; white-space: nowrap; width: 150px; }
            .div3 { overflow: hidden; white-space: nowrap; width: 70px; }
        </style>
        <!-- Make a call to Google jQuery to run the javascript below.  
             NOTE:  jQuery is NOT necessary for the ellipses javascript to work; including jQuery to make this example work -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {  
                //Loop through each DIV element
                $('div').each(function(index) {
                    var myDiv = this;  //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE)
                    var divText = myDiv; //Variable used to obtain the text from the DIV element above  

                    //Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element.  For this example, it will always be the firstChild  
                    divText = divText.firstChild;  

                    //Create another variable to hold the display text  
                    var sDisplayText = divText.nodeValue;  

                    //Determine if the DIV element is longer than it's supposed to be.
                    if (myDiv.scrollWidth > myDiv.offsetWidth) {  
                        //Percentage Factor is just a way of determining how much text should be removed to append the ellipses  
                        //With variable width fonts, there's no magic number, but 80%, should give you enough room
                        var percentageFactor = .8;  

                        //This is where the magic happens.
                        var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth;
                        sliceFactor = parseInt(sliceFactor);  //Get the value as an Integer
                        sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses
                        divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text
                    }
                });
            });
        </script>
    </head>
    <body>
        <table border="0">
            <tr>    
                <td><div class="div1">Short Value</div></td>    
                <td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td>    
                <td><div class="div3">Prince</div></td> 
            </tr>
            <tr>    
                <td><div class="div1">Longer Value</div></td>   
                <td><div class="div2">For score and seven year ago</div></td>   
                <td><div class="div3">Brown, James</div></td>   
            </tr>
            <tr>    
                <td><div class="div1">Even Long Td and Div Value</div></td> 
                <td><div class="div2">Once upon a time</div></td>   
                <td><div class="div3">Schwarzenegger, Arnold</div></td> 
            </tr>
        </table>
    </body>
</html>

मैं समझता हूं कि यह एक जेएस केवल फिक्स है, लेकिन जब तक मोज़िला बग को ठीक नहीं करता है, मैं बस एक सीएसएस समाधान के साथ आने के लिए पर्याप्त स्मार्ट नहीं हूं।

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

Comments

जवाब के लिए धन्यवाद; मैं इसे आज़माऊंगा, और मुझे यकीन है कि यह उसी मुद्दे को हल करने के लिए देख रहे अन्य लोगों के लिए उपयोगी होगा। +1

— स्पूडली

हम्म, आपको लगता है कि आपने अपने टेक्स्ट एडिटर को गलत तरीके से पेश किया है; -पी - आपको लगता है कि 8 अक्षर से कम चौड़े टैब का उपयोग किया जा रहा है!

— सैमबी

Answer 5

यह शुद्ध सीएसएस समाधान वास्तव में करीब है, इस तथ्य को छोड़कर कि यह हर पंक्ति के बाद इलिप्सिस प्रकट होने का कारण बनता है।

Comments

जवाब के लिए धन्यवाद। जितना मैं एक शुद्ध सीएसएस समाधान को स्वीकार करना चाहता हूं, यह एक मेरे लिए वास्तविक नहीं है, क्योंकि इसके लिए अतिरिक्त मार्कअप की आवश्यकता होती है और, जैसा कि आप कहते हैं, जब आप यह नहीं चाहते हैं तो यह दिखावा छोड़ देता है। हालांकि धन्यवाद। मैंने आपको फिर भी +1 दिया।

— 8