Kann CSS nach jedem Wort Zeilenumbrüche erzwingen, ohne die Breite zu ändern?

Kann CSS nach jedem Wort Zeilenumbrüche erreichen?

Beim Bestreben, eine mehrsprachige Website zu erstellen, die einem bestimmten Stil entspricht, steht ein Entwickler vor einer Herausforderung. Dem Websitebesitzer, der bei der Übersetzung behilflich ist, mangelt es an technischen Kenntnissen, was möglicherweise zu Änderungen an den Daten führt. Dies wirft Bedenken hinsichtlich der Beibehaltung von Zeilenumbrüchen auf, die für das Design der Website unerlässlich sind. Daher stellt sich die Frage: Bietet CSS eine Lösung, die über die Änderung der Breite hinausgeht, um Zeilenumbrüche nach jedem Wort zu erzwingen?

Lösung

Während PHP eine einfache Lösung bietet, lautet die Frage konzentriert sich auf die Aufdeckung eines möglichen CSS-Workarounds. Der Schlüssel liegt in der Kontrolle des Abstands zwischen Wörtern. Durch die Nutzung der Eigenschaft „word-spacing“ und die Angabe eines Werts, der größer als die Breite des übergeordneten Elements ist, ist es möglich, Zeilenumbrüche nach jedem Wort zu erzwingen.

Hier ist ein Beispiel-CSS-Code, der dies erreicht:

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

Dadurch wird sichergestellt, dass selbst ein einzelner Buchstabe in eine neue Zeile umgebrochen wird, solange die Breite des übergeordneten Elements breit genug ist.

Zur weiteren Verbesserung Bei diesem Ansatz können die folgenden CSS-Regeln auf das Zielelement angewendet werden:

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

Diese kombinierten CSS-Eigenschaften zwingen das Browser-Rendering dazu, Wortgrenzen einzuhalten und den Text in separate Zeilen aufzuteilen. Diese Methode ist mit den wichtigsten Browsern kompatibel, einschließlich Chrome, Firefox, Opera und IE7.

Das obige ist der detaillierte Inhalt vonKann CSS nach jedem Wort Zeilenumbrüche erzwingen, ohne die Breite zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!