CSS peut-il forcer les sauts de ligne après chaque mot d'un élément ?

Le CSS peut-il induire des sauts de ligne après chaque mot dans un élément ?

Dans le développement de sites Web multilingues, le maintien de la cohérence et de la lisibilité est crucial. Par exemple, considérons un site Web avec un texte multilingue dont le style dicte les sauts de ligne dans certaines phrases. Cependant, les sauts de ligne manuels utilisant
Les balises posent des problèmes lorsqu'il s'agit de contributeurs non techniques qui peuvent modifier par inadvertance les données pendant la traduction.

Existe-t-il une solution CSS pour appliquer des sauts de ligne après chaque mot d'un élément, quelle que soit la longueur du mot ?

Malgré la possibilité d'y parvenir en utilisant PHP, cela vaut la peine d'explorer le potentiel CSS solutions.

Solution CSS : espacement des mots et manipulation des conteneurs

Pour obtenir l'effet de saut de ligne souhaité, utilisez les propriétés CSS suivantes :

.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;
}

Dans cette approche, la classe .one-word-per-line régit l'espacement entre les mots (word-spacing), poussant efficacement chaque mot sur sa propre ligne. La classe .your-classname définit diverses propriétés de largeur et d'affichage qui garantissent que la largeur du conteneur est toujours suffisamment large pour accueillir ne serait-ce qu'un seul caractère, déclenchant ainsi des sauts de ligne si nécessaire.

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!