Heim >Web-Frontend >CSS-Tutorial >Wie kann ich bestimmte Zeilenumbruchstellen in HTML priorisieren, ohne
Wie kann ich bestimmte Zeilenumbruchstellen in HTML priorisieren, ohne oder geschützte Leerzeichen zu verwenden?
- Susan SarandonOriginal
- 2024-10-27 04:06:29444Durchsuche
oder geschützte Leerzeichen?
" />
Festlegen bevorzugter Zeilenumbruchpositionen
In HTML treten Zeilenumbrüche normalerweise an Leerzeichen oder Kommas auf. In Situationen, in denen Sie einen Zeilenumbruch erzwingen möchten An einer bestimmten Stelle gibt es eine Technik, um bevorzugte Umbrüche zu priorisieren.
Um eine bevorzugte Position für Zeilenumbrüche festzulegen, ohne geschützte Leerzeichen zu verwenden, können Sie den folgenden Ansatz verwenden:
-
Definieren Sie eine CSS-Klasse:
<code class="css">span.avoidwrap { display: inline-block; }</code> -
Umschließen Sie den Text, der in dieser Klasse zusammengehalten werden soll:
<code class="html"><span class="avoidwrap">Text to keep together</span></code>
Dies Die Methode legt den umbrochenen Text als Inline-Block fest und verhindert so, dass er innerhalb seiner eigenen Grenzen umbricht. Der Zeilenumbruchalgorithmus versucht zunächst, an den angegebenen bevorzugten Stellen (z. B. Kommas) umzubrechen, bevor Leerzeichen innerhalb des Inline-Blocks berücksichtigt werden.
Zum Beispiel das folgende Code-Snippet:
<code class="html"><html>
<head>
<style type="text/css">
span.avoidwrap {
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span class="avoidwrap">Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies</span>
<br />
<span class="avoidwrap">Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K</span>
<br />
<span class="avoidwrap">Froot Loops, Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html></code>
Führt dazu, dass die Zeilenumbrüche an den angegebenen Kommastellen vorgenommen werden, wodurch der Text in jedem Inline-Block zusammengehalten wird.
Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte Zeilenumbruchstellen in HTML priorisieren, ohne