Comment forcer les sauts de ligne dans le contenu en ligne en CSS ?

Forcer les sauts de ligne dans le contenu en ligne en CSS

Il est possible de rencontrer des situations où des sauts de ligne sont requis dans le contenu en ligne pour des raisons esthétiques ou organisationnelles. fins. Bien que CSS fournisse des méthodes pour sélectionner des éléments spécifiques, la tâche consistant à forcer un saut de ligne après un élément de bloc en ligne particulier devient un défi.

Dans le code HTML et CSS fourni, les éléments de la liste sont initialement affichés horizontalement dans un une seule rangée. Cependant, le résultat souhaité est de les répartir sur trois colonnes. Les solutions conventionnelles telles que l'ajout d'un saut de ligne à l'aide d'un
la balise ou l'exploitation de float ne sont pas réalisables.

Limites de CSS :

CSS ne dispose pas d'une fonctionnalité dédiée pour injecter des sauts de ligne directement dans les éléments en ligne ou en bloc en ligne. Cette limitation découle de la nature de ces valeurs d'affichage, qui ne prennent pas automatiquement en charge les sauts de ligne.

Approche alternative :

La solution de contournement démontrée consiste à créer un pseudo-élément ( :after) pour le troisième élément de la liste. Ce pseudo-élément reçoit un contenu de "A" (représentant un caractère de nouvelle ligne) et une propriété d'espacement de "pre" pour préserver le saut de ligne.

Remarque :

L'approche présentée est applicable lors de l'utilisation d'éléments en ligne. Lorsqu'il s'agit d'éléments de bloc en ligne, cette méthode est inefficace. Dans de tels scénarios, des solutions alternatives, telles que CSS Grid ou Flexbox, pourraient être plus appropriées.

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!