Wie kennzeichne ich bevorzugte Haltepunkte für den Zeilenumbruch in HTML, ohne geschützte Leerzeichen zu verwenden?

Bevorzugte Unterbrechungspunkte für den Zeilenumbruch angeben

In HTML treten Zeilenumbrüche normalerweise an Leerzeichen oder Bindestrichen auf. In bestimmten Fällen möchten Entwickler jedoch möglicherweise bevorzugte Haltepunkte für eine Zeile angeben, auch wenn an dieser bestimmten Stelle kein Leerzeichen oder Bindestrich vorhanden ist.

Stellen Sie sich die folgende Situation vor: Eine Tabellenzelle enthält eine lange Liste von Getreidenamen, die vorzugsweise nach den Kommas eingeschlossen werden sollten. Die Verwendung geschützter Leerzeichen zur Vermeidung unerwünschter Umbrüche kann jedoch zu einer unerwünschten Verbreiterung der Spalte führen.

Vorgeschlagene Lösung:

Anstatt geschützte Leerzeichen zu verwenden, empfehlen wir kann Inline-Block-Elemente verwenden, um das gewünschte Ergebnis zu erzielen. Durch Einschließen der bevorzugten Haltepunkte in ein Element mit der CSS-Klasse „avoidwrap“ können wir verhindern, dass innerhalb dieser Blöcke Zeilenumbrüche auftreten.

Beispiel:

<code class="html"><span class="avoidwrap">Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks</span></code>

<code class="css">span.avoidwrap {
  display: inline-block;
}</code>

Dieser Ansatz ermöglicht die Die Zeile soll vorzugsweise nach den Kommas innerhalb des -Zeichens umgebrochen werden. Elemente. Wenn die Zeile jedoch weiter umbrochen werden muss, wird sie nach Leerzeichen in den kleineren Fragmenten umgebrochen.

Hinweis:

Das CSS3-Verhalten „Textumbruch: vermeiden“ bietet ähnliche Funktionalität. Es ist jedoch wichtig, die Browserunterstützung zu überprüfen, bevor Sie es in Produktionsumgebungen verwenden.

Das obige ist der detaillierte Inhalt vonWie kennzeichne ich bevorzugte Haltepunkte für den Zeilenumbruch in HTML, ohne geschützte Leerzeichen zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!