Comment CSS peut-il créer automatiquement des sauts de ligne après chaque mot dans un élément ?

Sauts de ligne CSS pour chaque mot d'un élément

Dans les sites Web multilingues, maintenir un style visuel cohérent grâce aux sauts de ligne peut être difficile lorsque le propriétaire n'est pas familier avec le HTML. . Au lieu de compter sur des sauts de ligne manuels, qui pourraient être modifiés pendant la traduction, explorons une solution CSS qui s'interrompt automatiquement après chaque mot.

Une approche consiste à utiliser la propriété word-spacing, qui crée un espace supplémentaire entre les mots. Cependant, cela nécessite de définir la largeur de l'élément parent pour garantir un saut de ligne même après une seule lettre. Le code CSS suivant le démontre :

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

where est la largeur souhaitée de l'élément parent. Cette solution garantit qu'un saut de ligne se produit même après un seul mot, en conservant la disposition visuelle souhaitée.

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!