Wie erzwinge ich Zeilenumbrüche nach Kommas in HTML, ohne geschützte Leerzeichen zu verwenden?

So beeinflussen Sie Zeilenumbrüche in HTML

In HTML werden Zeilenumbrüche typischerweise durch Leerzeichen oder andere festgelegte Zeilenumbrüche bestimmt. Es kann jedoch vorkommen, dass Sie Zeilenumbrüche an bestimmten Stellen, insbesondere nach Kommas, priorisieren möchten. In diesem Artikel werden Techniken untersucht, um dies zu erreichen, ohne auf geschützte Leerzeichen zurückzugreifen.

Das Element

Der ursprüngliche Ansatz berücksichtigte die Verwendung von Elemente zum Umschließen von Textfragmenten. Diese Technik erwies sich jedoch als unwirksam.

Text-Wrap: Vermeidung der CSS-Eigenschaft

Das Verhalten von CSS3 Text-Wrap: Vermeidung scheint vielversprechend, erfordert jedoch möglicherweise Überlegungen zur Browserkompatibilität .

Verwendung der display:inline-block-Eigenschaft

Die display:inline-block-Eigenschaft kann auf eine Element, um Textfragmente als Inline-Block zusammenzuhalten.

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

Durch Einschließen des gewünschten Textes in dieses modifizierte Element, wird es als einzelner Block behandelt, der in seiner Gesamtheit umschließt. Erst nach dem Umschließen des Blocks wird der darin enthaltene Text bei Bedarf in kleinere Fragmente zerlegt.

<code class="html"><span class="avoidwrap">Honey Nut Cheerios,</span>
<span class="avoidwrap">Wheat Chex,</span>
<span class="avoidwrap">Grape-Nuts,</span></code>

Mit diesem Ansatz können Sie Zeilenumbrüche genauer steuern und gleichzeitig das gewünschte visuelle Erscheinungsbild beibehalten, ohne auf geschützte Leerzeichen zurückgreifen zu müssen die die Gesamtbreite bedingungslos verändern.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich Zeilenumbrüche nach Kommas in HTML, ohne geschützte Leerzeichen zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!