Comment envelopper du texte en CSS

CSS est un langage de feuille de style utilisé pour la conception Web, qui peut rendre les pages Web plus belles et plus faciles à lire. Le texte occupe une grande partie des pages Web. La manière de renvoyer à la ligne le texte est donc une question importante dans la conception CSS.

En CSS, le saut de ligne est appelé saut de ligne ou saut de mot. Il s'agit de la manière de faire en sorte que le texte soit automatiquement renvoyé ou d'ajouter des symboles de saut de mot lorsque la longueur d'une ligne de texte dépasse une certaine limite. Ce qui suit présentera comment implémenter le retour à la ligne du texte en CSS.

1. Utilisez l'attribut "word-wrap" en CSS

En CSS, vous pouvez utiliser l'attribut "word-wrap" pour contrôler si la segmentation des mots est effectuée au milieu d'un mot. Par défaut, le navigateur enveloppera automatiquement les mots dans de nouvelles lignes, mais en définissant l'attribut « word-wrap », le navigateur peut automatiquement insérer des symboles de césure au milieu des mots pour obtenir de meilleurs effets de retour à la ligne. Le code spécifique est le suivant :

p {
  word-wrap: break-word;
}

Ce style brisera les lignes de mots lorsque la largeur du conteneur est insuffisante et insérera des symboles de césure au milieu des mots pour garantir l'intégrité de l'arrangement.

2. Utilisez l'attribut "word-break" dans CSS

En plus de l'attribut "word-wrap", CSS fournit également un autre attribut "word-break" pour contrôler le retour à la ligne des non-CJK (Chine, Japon , et Corée). S'il est utilisé avec les paramètres par défaut, "word-break" coupera les mots n'importe où dans le mot, ce qui peut provoquer une discontinuité visuelle. Pour résoudre ce problème, vous pouvez définir l'attribut "word-break" sur "keep-all" afin que les lignes ne soient pas interrompues au niveau des mots. Le code spécifique est le suivant :

p {
  word-break: keep-all;
}

3. Utilisez l'attribut "white-space" en CSS

L'attribut "white-space" en CSS est utilisé pour contrôler l'affichage des espaces et des sauts de ligne dans le texte. Par défaut, l'attribut "white-space" est défini sur "normal", ce qui ignorera les espaces et sauts de ligne supplémentaires dans le texte. Si vous souhaitez conserver ces espaces et sauts de ligne, vous pouvez définir l'attribut "white-space". à "pré" ou "pré-emballage". Le code spécifique est le suivant :

p {
  white-space: pre-wrap;
}

Ce style conservera les espaces consécutifs et les sauts de ligne dans le conteneur. Si vous souhaitez forcer les sauts de ligne dans le texte, vous pouvez utiliser la marque "
", par exemple :

<p>这是第一行
这是第二行</p>

Les trois propriétés de style CSS couramment utilisées ci-dessus peuvent contrôler efficacement le retour à la ligne et l'affichage du texte. Dans la conception Web réelle, nous pouvons choisir les attributs appropriés en fonction de la situation réelle pour obtenir le meilleur effet.

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!