CSS peut-il forcer les sauts de ligne après chaque mot sans modifier la largeur ?

Le CSS peut-il réaliser des sauts de ligne après chaque mot ?

Dans la quête de la création d'un site Web multilingue adhérant à un style spécifique, un développeur est confronté à un défi. Le propriétaire du site, qui participe à la traduction, manque de compétences techniques, ce qui peut entraîner des modifications des données. Cela soulève des inquiétudes quant à la préservation des sauts de ligne essentiels à la conception du site. Par conséquent, la question se pose : CSS offre-t-il une solution au-delà de la modification de la largeur pour appliquer des sauts de ligne après chaque mot ?

Solution

Bien que PHP fournisse une solution simple, l'enquête se concentre sur la découverte d’une solution de contournement CSS potentielle. La clé réside dans le contrôle de l’espacement entre les mots. En tirant parti de la propriété d'espacement des mots et en spécifiant une valeur supérieure à la largeur de l'élément parent, il devient possible de forcer les sauts de ligne après chaque mot.

Voici un exemple de code CSS qui accomplit cela :

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

Cela garantit que même une seule lettre sera divisée en une nouvelle ligne, à condition que la largeur de l'élément parent soit suffisamment large.

Pour améliorer davantage Avec cette approche, les règles CSS suivantes peuvent être appliquées à l'élément cible :

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

Ces propriétés CSS combinées forcent le rendu du navigateur à respecter les limites des mots, divisant le texte en lignes distinctes. Cette méthode est compatible avec les principaux 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!