Comment puis-je créer des sauts de ligne en CSS sans utiliser `` ?

Réaliser des sauts de ligne sans
en CSS

En HTML, le
L'élément est couramment utilisé pour les sauts de ligne. Cependant, il existe des situations dans lesquelles nous pouvons souhaiter des méthodes alternatives pour obtenir des résultats similaires sans utiliser
.

Exemple de saut de ligne utilisant

<p>hello <br> How are you</p>

Sortie :

hello
How are you

Approche alternative utilisant CSS

Pour réaliser des sauts de ligne sans
, nous pouvons utiliser la propriété CSS white-space: pre. Cette propriété reproduit le comportement de l'attribut

 élément, préservant les caractères d'espacement, y compris les nouvelles lignes.</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">p {
  white-space: pre;
}

Copier après la connexion

<p>hello
How are you</p>

Effet de white-space: pre

La propriété white-space: pre instruit le navigateur pour conserver les caractères d'espacement tels qu'écrits dans le HTML. Dans ce cas, les nouvelles lignes entre « bonjour » et « Comment allez-vous » sont conservées, ce qui entraîne un saut de ligne.

Résultat de l'approche alternative

hello
How are you

Cette méthode constitue un moyen pratique de créer des sauts de ligne sans ajouter de balisage inutile au code HTML. Il est particulièrement utile dans les situations où des sauts de ligne sont souhaités mais où des éléments sémantiques tels que
ne conviennent pas.

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!