text-overflow: puntini di sospensione in Firefox 4? (e FF5)

La text-overflow:ellipsis;proprietà CSS deve essere una delle poche cose che Microsoft ha fatto bene per il Web.

Tutti gli altri browser ora lo supportano ... tranne Firefox.

Gli sviluppatori di Firefox ne discutono dal 2005 ma, nonostante l'ovvia richiesta, sembra che non riescano effettivamente a realizzarlo (anche -moz-un'implementazione sperimentale sarebbe sufficiente).

Alcuni anni fa, qualcuno ha escogitato un modo per hackerare Firefox 3 per farlo supportare i puntini di sospensione . L'hack utilizza la -moz-bindingfunzionalità per implementarla utilizzando XUL. Un bel numero di siti sta ora utilizzando questo hack.

La cattiva notizia? Firefox 4 sta rimuovendo la -moz-bindingfunzione , il che significa che questo hack non funzionerà più.

Quindi, non appena verrà rilasciato Firefox 4 (a seguito di questo mese, ho sentito), torneremo al problema di non essere in grado di supportare questa funzione.

Quindi la mia domanda è: c'è un altro modo per aggirare questo? (Sto cercando di evitare di ricorrere a una soluzione Javascript, se possibile)

[EDIT]
Molti voti positivi, quindi ovviamente non sono l'unico a volerlo sapere, ma finora ho una risposta che in pratica dice "usa javascript". Sto ancora sperando in una soluzione che non necessiti affatto di JS o, nel peggiore dei casi, lo usi solo come ripiego in cui la funzionalità CSS non funziona. Quindi pubblicherò una taglia sulla domanda, nella remota possibilità che qualcuno, da qualche parte, abbia trovato una risposta.

[EDIT]
Un aggiornamento: Firefox è entrato in modalità di sviluppo rapido, ma nonostante FF5 venga ora rilasciato questa funzione non è ancora supportata. E ora che la maggior parte degli utenti ha eseguito l'aggiornamento da FF3.6, l'hack non è più una soluzione. La buona notizia mi è stato detto che potrebbe essere aggiunto a Firefox 6, che con il nuovo programma di rilascio dovrebbe uscire tra pochi mesi. Se è così, allora credo di poter aspettare, ma è un peccato che non abbiano potuto risolverlo prima.

[MODIFICA FINALE]
Vedo che la funzione con i puntini di sospensione è stata finalmente aggiunta a "Aurora Channel" di Firefox (cioè versione di sviluppo). Ciò significa che ora dovrebbe essere rilasciato come parte di Firefox 7, che è previsto per la fine del 2011. Che sollievo.

Note di rilascio disponibili qui: https://developer.mozilla.org/en-US/Firefox/Releases/7

Spudley, potresti ottenere la stessa cosa scrivendo un piccolo JavaScript usando 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);
}

Capisco che dovrebbe esserci un modo in cui tutti i browser lo supportano in modo nativo (senza JavaScript) ma è quello che abbiamo a questo punto.

EDIT Inoltre, potresti renderlo più ordinato allegando una cssclasse a tutti quei campi a larghezza fissa, diciamo, fixWidth e poi fare qualcosa di simile al seguente:

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

EDIT 09/30/2011

FF7 è fuori, questo bug è stato risolto e funziona!

EDIT 29/08/2011

Questo problema è contrassegnato come risolto e sarà disponibile in FF 7; attualmente impostato per il rilascio il 27/09/2011.

Contrassegna i tuoi calendari e preparati a rimuovere tutti gli hack che hai messo in atto.

VECCHIO

Ho un'altra risposta: aspetta .

Il team di sviluppo di FF sta cercando di risolvere questo problema.

Hanno una correzione provvisoria impostata per Firefox 6.

Firefox 6 !! Quando verrà fuori?!?

Facile, persona immaginaria e iper-reattiva. Firefox è sulla pista di sviluppo veloce. Il rilascio di FF6 è previsto sei settimane dopo Firefox 5. Il rilascio di Firefox 5 è previsto per il 21 giugno 2011.

Quindi questo pone la soluzione all'inizio di agosto 2011 ... si spera.

Puoi iscriverti alla mailing list seguendo il bug dal link nella domanda del poster originale.

Oppure puoi cliccare qui ; a seconda di quale sia il più semplice.

Devo dire che sono un po 'deluso dal fatto che l'unico hack specifico per browser nella mia applicazione sarà supportare FF4. La soluzione javascript sopra non tiene conto dei caratteri a larghezza variabile. Ecco uno script più dettagliato che spiega questo. Il grosso problema con questa soluzione è che se l'elemento contenente il testo è nascosto quando il codice viene eseguito, la larghezza della casella non è nota. Questo è stato un problema per me, quindi ho smesso di lavorarci / testarlo ... ma ho pensato di pubblicarlo qui nel caso fosse utile a qualcuno. Assicurati di testarlo bene perché il mio test è stato meno che esaustivo. Avevo intenzione di aggiungere un controllo del browser per eseguire solo il codice per FF4 e consentire a tutti gli altri browser di utilizzare la loro soluzione esistente.

Questo dovrebbe essere disponibile per armeggiare qui: http://jsfiddle.net/kn9Qg/130/

HTML:

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

CSS:

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

Javascript (utilizza 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);
    }
}

Sarebbe chiamato come:

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

Mi sono imbattuto in questo gremlin nell'ultima settimana.

Poiché la soluzione accettata non tiene conto dei caratteri a larghezza variabile e la soluzione di wwwhack ha un ciclo While, inserirò il mio $ .02.

Sono stato in grado di ridurre drasticamente il tempo di elaborazione del mio problema utilizzando la moltiplicazione incrociata. Fondamentalmente, abbiamo una formula che assomiglia a questa:

La variabile x in questo caso è ciò che dobbiamo risolvere. Quando restituito come numero intero, darà la nuova lunghezza che dovrebbe essere il testo in eccesso. Ho moltiplicato MaxLength dell'80% per dare spazio sufficiente alle ellissi.

Ecco un esempio html completo:

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

Capisco che questa sia solo una correzione JS, ma fino a quando Mozilla non risolve il bug, non sono abbastanza intelligente da trovare una soluzione CSS.

Questo esempio funziona meglio per me perché il JS viene chiamato ogni volta che viene caricata una griglia nella nostra applicazione. La larghezza delle colonne per ogni griglia varia e non abbiamo alcun controllo sul tipo di computer che i nostri utenti Firefox visualizzano la nostra app (che, ovviamente, non dovremmo avere quel controllo :)).

Questa soluzione CSS pura è molto vicina, tranne per il fatto che fa apparire i puntini di sospensione dopo ogni riga.