Comment CSS peut-il forcer les sauts de ligne après chaque mot dans les sites Web multilingues ?

Supprimer les lignes après chaque mot en CSS

Dans le développement de sites Web multilingues, le maintien de l'alignement du texte et des éléments stylistiques peut poser des défis lorsqu'il s'agit de langues différentes règles. Un de ces scénarios consiste à forcer les sauts de ligne après chaque mot dans un élément spécifique pour garantir la cohérence. Bien que cela puisse être accompli avec PHP, il existe une solution CSS facultative à considérer.

Implémentation CSS

Pour obtenir l'effet souhaité, le code CSS suivant peut être appliqué à l'élément concerné :

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

Remplacer avec la largeur de l'élément parent ou une valeur élevée arbitraire qui dépasse la largeur d'une seule ligne. Cela garantit que chaque mot se divise en sa propre ligne.

Exemple

Considérez le code HTML suivant :

<p class="one-word-per-line">
    Short Word Gargantuan Word
</p>

Avec le CSS appliqué, le le texte sera affiché comme :

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

Compatibilité

Cette solution est prise en charge par Chrome, Firefox, Opera et IE7, garantissant une large compatibilité entre les navigateurs.

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!