Maison > interface Web > tutoriel CSS > Comment puis-je obtenir un retour à la ligne multi-navigateurs dans les divisions ?

Comment puis-je obtenir un retour à la ligne multi-navigateurs dans les divisions ?

Barbara Streisand
Libérer: 2024-12-23 10:58:52
original
669 Les gens l'ont consulté

How Can I Achieve Cross-Browser Word Wrapping in Divs?

Retour à la ligne multi-navigateurs en divisions

Question :

Est-il possible d'atteindre retour à la ligne pour les mots longs dans un div, garantissant ainsi plusieurs navigateurs compatibilité ?

Réponse :

Oui, il est possible d'obtenir un retour à la ligne multi-navigateurs à l'aide du code CSS suivant :

.wordwrap {
   white-space: pre-wrap;      /* CSS3 */
   white-space: -moz-pre-wrap; /* Firefox */
   white-space: -pre-wrap;     /* Opera <7 */
   white-space: -o-pre-wrap;   /* Opera 7 */
   word-wrap: break-word;      /* IE */
}
Copier après la connexion

Explication :

La classe .wordwrap utilise plusieurs propriétés CSS pour garantir le retour à la ligne des mots dans différents navigateurs :

  • espace blanc : le pré-enveloppement coupe les mots entre les lignes sans ajouter d'espaces supplémentaires, une fonctionnalité prise en charge dans les navigateurs modernes.
  • -moz-pre-wrap et -o- pre-wrap sont des alternatives préfixées par le fournisseur pour Mozilla Firefox et Opera, respectivement.
  • -pre-wrap fonctionne de la même manière dans les versions d'Opera antérieures à 7.
  • word-wrap : break-word force les sauts de mots dans Internet Explorer.

En combinant ces propriétés, vous pouvez efficacement envelopper des mots longs dans un div dans différents 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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal