Comment garantir l'habillage du texte dans les cellules du tableau dans tous les navigateurs ?

CSS pour l'habillage de texte dans les cellules d'un tableau

Dans les cas où le texte d'une cellule de tableau doit être renvoyé à la ligne, il est essentiel de prendre en compte la compatibilité du navigateur . Alors que l'utilisation de word-break : break-all ; et disposition de la table : fixe ; peut suffire pour Chrome, cela peut ne pas fonctionner comme prévu dans Firefox.

Compatibilité entre navigateurs

Pour résoudre ce problème de compatibilité du navigateur, une solution CSS plus complète peut être employé :

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

Ce CSS garantit que le texte sera correctement renvoyé dans différents navigateurs. En appliquant la classe wrapword à une cellule de tableau, le texte sera automatiquement coupé sans aucun espace indésirable :

<table>

Grâce à cette technique, le texte dans les cellules du tableau peut être renvoyé à la ligne efficacement, tout en maintenant la compatibilité entre navigateurs.

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!