Kann CSS nach jedem Wort in einem Element Zeilenumbrüche erzwingen?

Kann CSS nach jedem Wort in einem Element Zeilenumbrüche induzieren?

Bei der mehrsprachigen Website-Entwicklung ist die Aufrechterhaltung von Konsistenz und Lesbarkeit von entscheidender Bedeutung. Stellen Sie sich beispielsweise eine Website mit mehrsprachigem Text vor, bei der der Stil Zeilenumbrüche innerhalb bestimmter Phrasen vorschreibt. Manuelle Zeilenumbrüche mit
Tags stellen eine Herausforderung dar, wenn es um technisch nicht versierte Mitwirkende geht, die die Daten während der Übersetzung versehentlich ändern könnten.

Gibt es eine CSS-Lösung, um Zeilenumbrüche nach jedem Wort in einem Element zu erzwingen, unabhängig von der Wortlänge?

Trotz der Möglichkeit, dies mit PHP zu erreichen, lohnt es sich, potenzielles CSS zu erkunden Lösungen.

CSS-Lösung: Wortabstände und Containermanipulation

Um den gewünschten Zeilenumbrucheffekt zu erzielen, verwenden Sie die folgenden CSS-Eigenschaften:

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

Bei diesem Ansatz regelt die Klasse „.one-word-per-line“ den Abstand zwischen Wörtern (word-spacing), wodurch jedes Wort effektiv in seine eigene Zeile verschoben wird. Die Klasse .your-classname legt verschiedene Breiten- und Anzeigeeigenschaften fest, die sicherstellen, dass die Breite des Containers immer breit genug ist, um auch nur ein einzelnes Zeichen aufzunehmen, und so bei Bedarf Zeilenumbrüche auslöst.

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