Maison >interface Web >tutoriel CSS >Comment puis-je effectuer correctement un habillage de texte dans un conteneur HTML à largeur fixe ?

Comment puis-je effectuer correctement un habillage de texte dans un conteneur HTML à largeur fixe ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-09 04:21:10543parcourir

How Can I Make Text Wrap Properly Within a Fixed-Width HTML Container?

L'habillage de texte en HTML : un guide complet

L'habillage de texte dans des conteneurs HTML peut être crucial pour maintenir la lisibilité et le formatage. Lorsque le texte dépasse la largeur de son conteneur, cela peut entraîner des sauts de ligne disgracieux et une compréhension diminuée. Cet article explore des méthodes efficaces pour réaliser un habillage de texte en HTML.

Problème : Comment envelopper le texte en excès dans un div avec une largeur prédéfinie ?

Par exemple, considérons le texte suivant :

<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

Si ce texte est placé à l'intérieur d'un div d'une largeur de 200px, il s'étendra au-delà de l'espace du conteneur frontières. Pour résoudre ce problème, nous devons appliquer l'habillage de texte.

Solution : CSS

CSS fournit une solution simple mais efficace pour l'habillage de texte. En définissant la propriété word-wrap sur break-word, nous permettons au texte de se briser à tout moment et de passer à la ligne suivante.

div {
    width: 200px;
    word-wrap: break-word;
}

En utilisant cette règle CSS, le texte en excès sera automatiquement renvoyé à s'adapter à la largeur du conteneur, garantissant des sauts de ligne appropriés et une meilleure lisibilité.

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!

Déclaration:
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