Wie kann CSS nach jedem Wort in einem Element automatisch Zeilenumbrüche erstellen?

CSS-Zeilenumbrüche für jedes Wort in einem Element

Bei mehrsprachigen Websites kann die Aufrechterhaltung eines einheitlichen visuellen Stils durch Zeilenumbrüche eine Herausforderung sein, wenn der Eigentümer mit HTML nicht vertraut ist . Anstatt uns auf manuelle Zeilenumbrüche zu verlassen, die während der Übersetzung geändert werden könnten, erkunden wir eine CSS-Lösung, die nach jedem Wort automatisch einen Umbruch durchführt.

Ein Ansatz besteht in der Verwendung der Eigenschaft „word-spacing“, die zusätzlichen Abstand zwischen Wörtern schafft. Allerdings muss die Breite des übergeordneten Elements festgelegt werden, um einen Zeilenumbruch auch nach einem einzelnen Buchstaben sicherzustellen. Der folgende CSS-Code demonstriert dies:

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

wobei ist die gewünschte Breite des übergeordneten Elements. Diese Lösung stellt sicher, dass ein Zeilenumbruch auch nach einem einzelnen Wort erfolgt und das gewünschte visuelle Layout erhalten bleibt.

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