Comment puis-je obtenir des points de suspension de débordement de texte dans Firefox sans JavaScript ?

Prise en charge des éléments Ellipsis dans Firefox : un parcours et une résolution

Le débordement de texte est une propriété CSS cruciale pour afficher efficacement du texte tronqué. Alors que de nombreux navigateurs ont implémenté « text-overflow : points de suspension », Firefox n'a pas encore emboîté le pas.

Pendant des années, un hack utilisant la fonctionnalité -moz-binding a permis à Firefox 3 d'afficher des points de suspension. Cependant, avec la suppression de cette fonctionnalité dans Firefox 4, le hack est devenu obsolète.

La question se pose : existe-t-il une solution alternative sans recourir à JavaScript ?

Bien que JavaScript offre une option viable, une approche plus souhaitable consiste à trouver une solution CSS native. Malheureusement, Firefox 5 et les versions antérieures continuent de manquer de support.

Cependant, il y a de l'espoir à l'horizon. La fonctionnalité de points de suspension a été ajoutée à « Aurora Channel » de Firefox. Cela indique qu'il sera probablement publié dans Firefox 7, apportant une solution tant attendue à ce problème.

Jusqu'à la sortie officielle, JavaScript reste une option alternative. En utilisant jQuery, on peut implémenter un script simple :

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

De plus, attacher une classe CSS à des éléments de largeur fixe permet une manipulation JavaScript plus facile :

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

Comme Firefox continue de le faire évoluer, la demande de support natif de "text-overflow: ellipsis" va certainement croître. Avec son inclusion dans Firefox 7, cette fonctionnalité tant attendue va enfin répondre aux attentes des développeurs et des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!