Comment CSS peut-il forcer un saut de ligne après chaque mot sans ajustement manuel de la largeur ?

Imposer des sauts de ligne après chaque mot en CSS

Maintenir un style visuel cohérent dans un site Web multilingue peut être un défi, en particulier lorsque les traductions peuvent introduire les sauts de ligne qui perturbent le design. Alors que le problème de l'alignement de mots de différentes longueurs est généralement résolu en ajustant la largeur des éléments, les développeurs recherchent des solutions CSS alternatives qui éliminent le besoin d'ajustements manuels ou le recours à des langages de programmation comme PHP.

Pour y parvenir, un CSS une astuce impliquant la propriété d'espacement des mots peut être utilisée. En définissant l'espacement des mots sur une valeur suffisamment grande, cela force un saut de ligne après chaque mot. Cependant, cette approche nécessite de calculer dynamiquement la largeur de l'élément parent, ce qui peut s'avérer complexe et introduire des défis supplémentaires.

Heureusement, une solution plus sophistiquée a émergé qui exploite les fonctionnalités CSS et les propriétés d'affichage avancées. En combinant les propriétés 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;
}

Les développeurs peuvent imposer un saut de ligne après chaque mot, garantissant ainsi que même les mots d'une seule lettre passent à la ligne suivante. Cette solution est compatible avec une large gamme de navigateurs, notamment Chrome, Firefox, Opera et IE7 .

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!