Comment réaliser un retour à la ligne multi-navigateurs sans casser les espaces ?

Retour à la ligne de mots entre navigateurs sans rompre les espaces

Relever le défi de l'encapsulation d'un texte long et ininterrompu dans des divs contraints peut être un casse-tête entre navigateurs. Avec les limitations de diverses propriétés et techniques CSS, trouver une solution universellement prise en charge s'avère difficile.

Solutions potentielles et leurs inconvénients

Les tentatives pour résoudre ce problème à l'aide des propriétés de débordement ne parviennent pas à garantir une visibilité complète du texte. Présentation de ­ dans le texte via JavaScript ou des scripts côté serveur sont confrontés à des problèmes de compatibilité dans Safari et à la complexité de trouver un emplacement optimal pour ces caractères. L'injection de texte dans des éléments masqués pour mesurer la largeur de décalage entraîne des coûts de performances importants.

Les polices monospaces et la propriété word-wrap : break-word de CSS3 offrent de l'espoir, mais les deux ne prennent pas en charge le navigateur universel. Injection Les balises fournissent une certaine utilité, mais la mesure des points d'arrêt reste un obstacle. Ajouter des sauts après chaque caractère est inefficace et gourmand en mémoire.

La solution prometteuse

Heureusement, CSS offre une solution simple et multi-navigateurs sous la forme de propriétés d'espaces blancs. En appliquant les règles CSS suivantes, l'habillage du texte peut être obtenu de manière cohérente dans tous les principaux navigateurs :

.wordwrap {
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}

Cette classe CSS peut être utilisée pour envelopper le texte dans des div avec des largeurs spécifiques, permettant une présentation et une lisibilité améliorées sans compromettre interaction ou accessibilité de l'utilisateur.

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!