text-overflow:ellipsis dans Firefox 4? (et FF5)

EDIT 30/09/2011

FF7 est, ce bug est résolu et ça marche!!!

EDIT 29/08/2011

Cette question est marqué comme résolu et sera disponible dans FF 7; actuellement prévue pour une sortie sur 09/27/2011.

Marquez vos calendriers et préparez-vous à enlever tous ces pirouettes vous avez mis en place.

VIEUX

j'ai une autre réponse: attendre .

L'équipe FF dev est à la poursuite pour résoudre ce problème.

ils ont fixé provisoirement Firefox 6.

Firefox 6 !! Quand qui viennent ?!?

facile là, imaginaire, réactifs personne. Firefox est sur la voie du développement rapide. FF6 est prévu pour la sortie six semaines après Firefox 5. La sortie de Firefox 5 est prévue pour le 21 juin 2011.

donc qui met le correctif dans le début du mois d'août 2011...avec de la chance.

vous pouvez vous inscrire à la liste de diffusion en suivant le bug du lien dans la question de l'affiche originale.

ou vous pouvez Cliquez ici ; selon ce qui est le plus facile.

je dois dire que je suis un peu déçu que le seul hack spécifique à mon navigateur dans mon application va être de supporter FF4. La solution javascript ci-dessus ne tient pas compte des polices de largeur variables. Voici un script plus verbeux qui explique cela. Le gros problème avec cette solution est que si l'élément contenant le texte est masqué lorsque le code est exécuté, alors la largeur de la zone n'est pas connue. C'était une rupture de contrat pour moi donc j'ai arrêté de travailler/le tester... mais je pensais que je postez-le ici au cas où il serait utile à quelqu'un. Assurez-vous de bien le tester, car mes tests n'étaient pas exhaustifs. J'ai l'intention d'ajouter une vérification de navigateur pour exécuter seulement le code pour FF4 et laisser tous les autres navigateurs utiliser leur solution existante.

cela devrait être disponible pour jouer ici: 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 (utilisations 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);
    }
}

on l'appellerait comme:

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

je suis tombé sur ce gremlin au cours de la semaine dernière aussi bien.

puisque la solution acceptée ne tient pas compte des polices à largeur variable et que la solution de wwwhack a une boucle While, je rajouterai mon $.02.

j'ai été capable de réduire drastiquement le temps de traitement de mon problème en utilisant la Cross-multiplication. Fondamentalement, nous avons une formule qui ressemble à ceci:

la variable x dans ce cas est ce que nous devons résoudre. Lorsqu'il est retourné comme un entier, il donnera la nouvelle longueur que le texte débordant devrait être. J'ai multiplié le MaxLength par 80% pour donner assez de place aux ellipses.

voici un exemple html complet:

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

je comprends que c'est une correction de JS seulement, mais jusqu'à ce que Mozilla corrige le bug, Je ne suis pas intelligent assez pour trouver une solution CSS.

cet exemple fonctionne le mieux pour moi parce que le JS est appelé chaque fois qu'une grille charge dans notre application. La largeur de colonne pour chaque grille varie et nous n'avons aucun contrôle sur le type d'ordinateur que nos utilisateurs de Firefox voient notre application (qui, bien sûr, nous ne devrait pas avoir ce contrôle :) ).

Cette solution CSS pure est vraiment proche, sauf qu'elle fait apparaître ellipsis après chaque ligne.