Wie kann CSS in mehrsprachigen Websites Zeilenumbrüche nach jedem Wort erzwingen?

Zeilenumbruch nach jedem Wort in CSS

Bei der mehrsprachigen Website-Entwicklung kann die Aufrechterhaltung der Textausrichtung und der Stilelemente beim Umgang mit verschiedenen Sprachen eine Herausforderung darstellen Regeln. Ein solches Szenario besteht darin, nach jedem Wort in einem bestimmten Element Zeilenumbrüche zu erzwingen, um die Konsistenz sicherzustellen. Obwohl dies mit PHP erreicht werden kann, ist eine optionale CSS-Lösung zu berücksichtigen.

CSS-Implementierung

Um den gewünschten Effekt zu erzielen, kann der folgende CSS-Code angewendet werden das relevante Element:

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

Ersetzen Sie mit der Breite des übergeordneten Elements oder einem beliebigen hohen Wert, der die Einzellinienbreite überschreitet. Dadurch wird sichergestellt, dass jedes Wort in eine eigene Zeile umbricht.

Beispiel

Betrachten Sie den folgenden HTML-Code:

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

Mit angewendetem CSS wird das Der Text wird angezeigt als:

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

Kompatibilität

Diese Lösung wird von Chrome, Firefox, Opera und IE7 unterstützt und gewährleistet so eine umfassende Kompatibilität zwischen allen Browsern.

Das obige ist der detaillierte Inhalt vonWie kann CSS in mehrsprachigen Websites Zeilenumbrüche nach jedem Wort erzwingen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!