當需要在特定點出現換行時，如何控制 HTML 表格中的換行？-css教學-PHP中文網

當需要在特定點出現換行時，如何控制 HTML 表格中的換行？

Susan Sarandon

發布： 2024-10-27 20:33:02

原創

602 人瀏覽過

How to Control Line Breaks in HTML Tables When You Need Them to Occur at Specific Points?

HTML 中的首選換行符

建立網頁內容通常涉及在表格中顯示文本，其中需要換行符以防止內容溢出。但是，可能會優先選擇在特定點發生換行。

指定首選斷點

在提供的範例中，表格單元包含以下列表穀物以逗號分隔。所需的行為是在逗號之後、空格之前發生換行。但是，HTML 本身並沒有提供指定首選斷點的方法。

避免不間斷空格

插入不間斷空格可以強制發生換行在特定點上，但它也會無條件地增加文字寬度。為了避免這種情況，需要另一種方法。

Text-Wrap 屬性

CSS3 引入了 text-wrap 屬性，該屬性允許控製文字中的換行符。但是，在範例中嘗試使用 text-wrap:void 被證明是不成功的。

內聯塊顯示

相反，可以在中使用 display: inline-block 屬性與包裝元素結合。這有效地在單元格內創建了一個可以獨立於周圍文字換行的文字「區塊」。

範例

要實現所需的行為，請使用以下CSS 和HTML可以使用：

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

登入後複製

<code class="html"><td>
  <span class="avoidwrap">Honey Nut Cheerios,</span>
  <span class="avoidwrap">Wheat Chex,</span>
  <span class="avoidwrap">Grape-Nuts,</span>
  <span class="avoidwrap">Rice Krispies,</span>
  <span class="avoidwrap">Some random cereal with a very long name,</span>
  <span class="avoidwrap">Honey Bunches of Oats,</span>
  <span class="avoidwrap">Wheaties,</span>
  <span class="avoidwrap">Special K,</span>
  <span class="avoidwrap">Froot Loops,</span>
  <span class="avoidwrap">Apple Jacks</span>
</td></code>

登入後複製

效果

透過使用avoidwrap類，穀物名稱保持在一起，並且在逗號處出現換行，根據需要。如果該行需要進一步換行，穀物名稱將在空格處斷開。

以上是當需要在特定點出現換行時，如何控制 HTML 表格中的換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！