当需要在特定点出现换行时，如何控制 HTML 表格中的换行？

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中文网其他相关文章！