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 mithilfe von
-Tags stellen jedoch eine Herausforderung dar, wenn es um technisch nicht versierte Mitwirkende geht, die die Daten während der Übersetzung möglicherweise versehentlich ändern.

Gibt es eine CSS-Lösung, um Zeilenumbrüche nach jedem Wort zu erzwingen? in einem Element, 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: ; 
}

.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 .one-word-per-line-Klasse 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.