Comment résoudre le débordement de texte en utilisant CSS

Le débordement de texte est toujours un gros problème, en particulier dans les environnements programmatiques. Il n'y a toujours qu'une quantité limitée d'espace, mais un contenu variable peut être ajouté à cet espace. Je travaillais récemment sur un tableau utilisé pour afficher les informations utilisateur et j'ai remarqué que des chaînes plus longues interrompaient l'affichage du tableau. La solution évidente consiste à ajouter un paramètre de débordement : masqué pour les cellules du tableau, mais même dans ce cas, le texte ne semble pas naturellement coupé. La façon de rendre le débordement de texte élégant consiste à utiliser des points de suspension et la propriété text-overflow du CSS. Voyons!

CSS

La création du CSS derrière les points de suspension est très simple, y compris la largeur, le retour à la ligne, le débordement et le débordement de texte :

.dataTable td { 
/ * essential * / 
text-overflow ：ellipsis ; 
width： 200px ; 
white-space： nowrap ; 
overflow：hidden ;
/ *外观漂亮* / 
padding： 10px; 
}

Définition du la largeur fournit des limites évidentes, l'espace blanc empêche le retour à la ligne normal suivant, le débordement caché garantit que la dimension de largeur est respectée et le paramètre de débordement de texte fournit des ellipses. Génial, non ? Mais il y a un problème...

Firefox et les ellipses

Malheureusement, Firefox ne prend actuellement pas en charge le débordement de texte : les ellipses. Le Dojo Toolkit fournit une solution simple pour Firefox : dojox.html.ellipsis. Cette ressource utilise une cale iFrame pour créer des ellipses. Voici comment l'utiliser :

//需要资源 dojo 。require （“dojox.html.ellipsis” ）;

Après avoir demandé la ressource JavaScript, il est temps pour dojoxEllipsis de placer un nœud dans la page indiquant que la ressource dojox.html.ellipsis doit l'ellipser :

< div  class = “ dojoxEllpsis ” > Pellentesque居住者morbi tristique senectus et netus et malesuada ... </ div >

dojoxEllipsis Chaque fois que l'arborescence DOM est modifiée, Dojo recherche dans la page des éléments avec des classes CSS et les ellipse.

La mise en œuvre de points de suspension dynamiques pour le contenu est un moyen simple, subtil et efficace de gérer avec élégance le contenu au sein d'un contenu restreint. Débordement de texte : les ellipses sont prises en charge par les principaux fournisseurs de navigateurs, à l'exception de Firefox. L'implémentation de Dojo est stable et efficace, mais peut ralentir la page si la page contient de nombreux éléments ovales. Bonne ovalisation !

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!