Comment utiliser CSS pour réaliser des sauts de ligne (trois méthodes)

Le retour à la ligne fait référence au comportement de passage automatique à la ligne suivante lorsque du texte ou un autre contenu atteint la fin de la ligne. Dans la conception Web, des sauts de ligne corrects peuvent rendre la page plus confortable et naturelle. En CSS, pour obtenir des sauts de ligne corrects, il faut comprendre certains principes et techniques. Cet article vous présentera plusieurs méthodes pour utiliser CSS pour réaliser des sauts de ligne.

Méthode 1 : Utiliser le retour à la ligne 

En CSS3, l'attribut word-wrap est fourni, qui peut être utilisé pour contrôler la façon dont le texte est renvoyé à la ligne. Cet attribut a les valeurs suivantes :

• normal : la valeur de l'attribut par défaut, ce qui signifie que le texte n'est pas restreint et peut dépasser la limite ;
• break-word : signifie que lorsque le texte dépasse la limite, le mot sera automatiquement tronqué et enveloppé, mais si le mot lui-même est très long et dépasse toujours la limite ;
• n'importe où : signifie que le texte peut s'enrouler n'importe où ;
• overflow-wrap : signifie que le texte peut s'enrouler autour du "mot", et si un mot long est rencontré, la nouvelle ligne sera tronquée.

L'utilisation du word-wrap est également très simple, il vous suffit de définir les attributs correspondants en CSS. Par exemple :

p {
  word-wrap: break-word;
}

Le code ci-dessus entraînera la troncature automatique du texte de l'élément p lorsqu'il rencontre une limite et son enroulement en fonction de la longueur du mot.

Méthode 2 : Utiliser le saut de mot

le retour à la ligne n'est pas toujours la solution idéale car parfois vous voulez éviter de tronquer un mot et souhaitez plutôt qu'il soit renvoyé n'importe où. Dans ce cas, nous pouvons utiliser l'attribut word-break. L'attribut

word-break a les valeurs suivantes :

• normal : La valeur de l'attribut par défaut signifie que le texte est restreint et que la troncature au milieu du mot n'est pas autorisée.
• break-all : indique un saut de ligne à n'importe quelle position, même au milieu d'un mot. Cependant, cela détruirait l’intégrité du mot et n’est pas recommandé.
• keep-all : Indique que le texte n'est interrompu qu'au niveau des espaces ou des tirets, adapté aux langues asiatiques et aux autres langues qui n'utilisent pas d'espaces.

Par exemple, si vous souhaitez interrompre un caractère chinois complet dans le saut de ligne de texte, vous pouvez utiliser le code suivant :

p {
  word-break: break-all;
}

Méthode 3 : Utiliser l'espace blanc

L'espace blanc est utilisé en CSS pour contrôler les espaces et les sauts de ligne dans les propriétés du texte. Il a les valeurs suivantes :

• normal : la valeur d'attribut par défaut, ce qui signifie que plusieurs espaces et sauts de ligne dans le texte seront fusionnés en un seul espace
• pre : signifie que plusieurs espaces et sauts de ligne dans le texte seront fusionnés ; conservé, non fusionné ;
• nowrap : indique que le texte ne sera pas automatiquement renvoyé à la ligne.
• pre-wrap : indique que plusieurs espaces et sauts de ligne dans le texte seront conservés, mais les lignes seront automatiquement renvoyées à la ligne et aucune barre de défilement horizontale n'apparaîtra.
• pré-ligne : indique que plusieurs espaces dans le texte seront fusionnés en un seul espace, mais les sauts de ligne seront conservés, le retour à la ligne automatique et aucune barre de défilement horizontale n'apparaîtra.

Par exemple, dans plusieurs lignes de commentaires de code, si vous souhaitez conserver les espaces et les sauts de ligne d'origine, vous pouvez utiliser le code suivant :

.comment {
  white-space: pre;
}

Cela peut garantir que le format du texte affiché sur la page est cohérent avec le format du code original.

Résumé

En CSS, pour obtenir des sauts de ligne corrects, il faut connaître quelques astuces. Utilisez les trois attributs de retour à la ligne, de saut de mot et d'espace blanc pour obtenir un retour à la ligne automatique, un saut de mot et une conservation des espaces blancs du texte. Des sauts de ligne corrects peuvent rendre une page plus lisible, plus belle et plus professionnelle.

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!