text-overflow: points de suspension dans Firefox 4? (et FF5)

La text-overflow:ellipsis;propriété CSS doit être l'une des rares choses que Microsoft a bien faites pour le Web.

Tous les autres navigateurs le prennent désormais en charge ... sauf Firefox.

Les développeurs de Firefox se disputent à ce sujet depuis 2005 mais malgré la demande évidente, ils ne semblent pas pouvoir se résoudre à l'implémenter (même une -moz-implémentation expérimentale serait suffisante).

Il y a quelques années, quelqu'un a trouvé un moyen de pirater Firefox 3 pour qu'il prenne en charge une ellipse . Le hack utilise la -moz-bindingfonctionnalité pour l'implémenter en utilisant XUL. Un certain nombre de sites utilisent maintenant ce hack.

Les mauvaises nouvelles? Firefox 4 supprime la -moz-bindingfonctionnalité , ce qui signifie que ce hack ne fonctionnera plus.

Donc, dès la sortie de Firefox 4 (plus tard ce mois-ci, j'entends), nous allons revenir au problème de ne pas pouvoir prendre en charge cette fonctionnalité.

Ma question est donc la suivante: y a-t-il un autre moyen de contourner cela? (J'essaie d'éviter de revenir à une solution Javascript si possible)

[EDIT]
Beaucoup de votes à la hausse, donc je ne suis évidemment pas le seul à vouloir savoir, mais j'ai jusqu'à présent une réponse qui dit essentiellement «utiliser javascript». J'espère toujours une solution qui n'aura pas besoin du tout de JS, ou au pire ne l'utilisera que comme solution de secours là où la fonctionnalité CSS ne fonctionne pas. Je vais donc publier une prime sur la question, au cas où quelqu'un, quelque part, aurait trouvé une réponse.

[EDIT]
Une mise à jour: Firefox est passé en mode de développement rapide, mais malgré la sortie de FF5, cette fonctionnalité n'est toujours pas prise en charge. Et maintenant que la majorité des utilisateurs sont passés de FF3.6, le hack n'est plus une solution. La bonne nouvelle, on me dit qu'il pourrait être ajouté à Firefox 6, qui, avec le nouveau calendrier de publication, devrait sortir dans quelques mois seulement. Si tel est le cas, alors je suppose que je peux attendre, mais c'est dommage qu'ils n'aient pas pu régler le problème plus tôt.

[EDIT FINAL]
Je vois que la fonction de sélection a finalement été ajoutée à "Aurora Channel" de Firefox (c'est-à-dire la version de développement). Cela signifie qu'il devrait maintenant être publié dans le cadre de Firefox 7, qui devrait sortir vers la fin de 2011. Quel soulagement.

Notes de version disponibles ici: https://developer.mozilla.org/en-US/Firefox/Releases/7

Spudley, vous pouvez réaliser la même chose en écrivant un petit JavaScript en utilisant 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);
}

Je comprends qu'il devrait y avoir un moyen que tous les navigateurs prennent en charge nativement (sans JavaScript) mais, c'est ce que nous avons à ce stade.

EDIT En outre, vous pouvez le rendre plus soigné en attachant une cssclasse à tous ces champs de largeur fixe fixWidth , puis faites quelque chose comme ce qui suit:

$(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 30/09/2011

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

EDIT 29/08/2011

Ce problème est marqué comme résolu et sera disponible dans FF 7; actuellement prévu pour sortir le 27/09/2011.

Marquez vos calendriers et préparez-vous à supprimer tous ces hacks que vous avez mis en place.

VIEUX

J'ai une autre réponse: attendez .

L'équipe de développement FF est à la recherche de résoudre ce problème.

Ils ont un ensemble de correctifs provisoires pour Firefox 6.

Firefox 6 !! Quand cela sortira-t-il?!?

Personne facile là-bas, imaginaire, trop réactive. Firefox est sur la voie du développement rapide. FF6 devrait sortir six semaines après Firefox 5. Firefox 5 devrait sortir le 21 juin 2011.

Cela met donc le correctif au début d'août 2011 ... j'espère.

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

Ou vous pouvez cliquer ici ; selon la solution la plus simple.

Je dois dire que je suis un peu déçu que le seul hack spécifique au navigateur dans mon application soit de prendre en charge FF4. La solution javascript ci-dessus ne tient pas compte des polices à largeur variable. Voici un script plus détaillé qui en tient compte. Le gros problème avec cette solution est que si l'élément contenant le texte est masqué lors de l'exécution du code, la largeur de la boîte n'est pas connue. C'était un facteur décisif pour moi, alors j'ai arrêté de travailler dessus / de le tester ... mais j'ai pensé que je le publierais ici au cas où il serait utile à quelqu'un. Assurez-vous de bien le tester car mes tests étaient loin d'être exhaustifs. J'avais l'intention d'ajouter une vérification du navigateur pour n'exécuter que le code de 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 (utilise 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);
    }
}

Il s'appellerait comme:

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

J'ai aussi rencontré ce gremlin la semaine dernière.

Étant donné que la solution acceptée ne tient pas compte des polices à largeur variable et que la solution de wwwhack a une boucle While, je vais ajouter 0,02 $.

J'ai pu réduire considérablement le temps de traitement de mon problème en utilisant la multiplication croisée. En gros, nous avons une formule qui ressemble à ceci:

La variable x dans ce cas est ce que nous devons résoudre. Lorsqu'il est retourné en tant qu'entier, il donnera la nouvelle longueur que le texte débordant devrait être. J'ai multiplié la MaxLength de 80% pour donner aux ellipses suffisamment de place pour s'afficher.

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 ce n'est qu'un correctif pour JS, mais tant que Mozilla ne corrige pas le bogue, je ne suis tout simplement pas assez intelligent pour proposer une solution CSS.

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

Cette solution CSS pure est vraiment proche, à l'exception du fait qu'elle fait apparaître des ellipses après chaque ligne.