Wie erzwinge ich Zeilenumbrüche in HTML mithilfe der Klasse „span.avoidwrap'?

Erstellen festgelegter Zeilenumbruchpunkte in HTML

In HTML werden Zeilenumbrüche normalerweise durch die natürlichen Leerzeichen des Textes bestimmt (z. B. Leerzeichen, Kommas). In bestimmten Szenarien kann es jedoch wünschenswert sein, eine bevorzugte Stelle für einen Zeilenumbruch anzugeben.

Gekennzeichnete Zeilenumbrüche mit span.avoidwrap

Um eine bestimmte Zeile zu implementieren Um den Haltepunkt zu erreichen, verwenden Sie die Klasse span.avoidwrap. Diese Klasse definiert Span-Elemente als Inline-Blöcke, die als einzelne Einheiten und nicht als separate Wörter gerendert werden. Durch Einschließen des gewünschten Textes in Tags priorisiert der Zeilenumbruchalgorithmus Pausen am Anfang des Span-Elements.

Beispiel:

Betrachten Sie den folgenden HTML-Code:

<code class="html"><table border="1" cellspacing="0" cellpadding="0">
<tr>
    <td>
        <div style="width: 180px;">
            <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    lorem ipsum
                </td>
                <td>
                    <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>
                </td>
                <td>
                    lorem ipsum
                </td>
            </tr>
            </table>
        </div>
    </td>
</tr>
</table></code>

In diesem Beispiel lautet der Text „Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some Random Cerealien mit einem sehr langen Namen, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks“. in ein span.avoidwrap-Element eingeschlossen. Dies zeigt dem Browser an, dass am Anfang des Spans ein Zeilenumbruch vorgenommen werden sollte, was zu einem Zeilenumbruch nach „Rice Krispies“ führt:

<code class="html">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</code>

Hinweis: Während der Text -wrap: CSS-Eigenschaft vermeiden bietet eine ähnliche Funktionalität, wird jedoch möglicherweise nicht von allen Browsern unterstützt.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich Zeilenumbrüche in HTML mithilfe der Klasse „span.avoidwrap'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!