如何在不使用不間斷空格的情況下在 HTML 中表示換行的首選斷點？

表示換行的首選斷點

在 HTML 中，換行通常出現在空格或破折號處。然而，在某些情況下，開發人員可能希望為一行指定首選斷點，即使該特定位置沒有空格或破折號。

考慮以下情況：表格單元格包含一長串應優先在逗號後換行的穀物名稱。但是，使用不間斷空格來防止不必要的中斷可能會導致列不必要的變寬。

建議的解決方案：

我們不使用不間斷空格，而是使用不間斷空格可以利用內聯塊元素來實現所需的結果。透過將首選斷點包裝在 中，具有 CSS 類別「avoidwrap」的元素，我們可以防止這些區塊內發生換行。

範例：

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

此方法允許優先在 內的逗號之後換行元素。但是，如果該行需要進一步換行，它將在較小片段中的空格後斷開。

注意：

CSS3 文字換行：避免行為提供類似的功能。但是，在生產環境中使用之前檢查瀏覽器支援非常重要。

以上是如何在不使用不間斷空格的情況下在 HTML 中表示換行的首選斷點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！