如何使用 `span.avoidwrap` 類別在 HTML 中強制換行？

在HTML 中建立指定換行點

在HTML 中，換行符通常由文字的自然空白字元（例如空格、逗號） 。但是，對於某些場景，可能需要指定換行符的首選位置。

使用 span.avoidwrap 指定換行符

實作指定換行斷點，使用span.avoidwrap類別。此類別將 span 元素定義為內聯塊，它們呈現為單個單元而不是單獨的單字。將所需的文字括在 中標籤時，換行演算法將優先考慮 span 元素開頭的中斷。

範例：

考慮以下HTML 程式碼：

<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>

在此範例中，文字「Honey Nut Cheerios、Wheat Chex、Grape- Nuts、Rice Krispies、一些名稱很長的隨機麥片、Honey Bunches of Oats、Wheaties、Special K、Froot Loops、Apple Jacks」包裹在span.avoidwrap 元素內。這向瀏覽器表明應在跨度的開頭進行換行，從而導致“Rice Krispies”之後換行：

<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>

注意： 而文字-wrap：避免CSS 屬性提供類似的功能，但可能並非所有瀏覽器都支援。

以上是如何使用 `span.avoidwrap` 類別在 HTML 中強制換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！