html（+ css）：表示换行的首选位置

小编典典

html（+ css）：表示换行的首选位置

css

假设我要在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

我希望在其中一个逗号后优先换行。

有没有一种方法可以告诉HTML渲染器在指定的位置尝试中断，并且先尝试在某个空格之后中断而不
使用不间断空格？如果我使用不间断的空格，那么它将无条件增大宽度。我希望换行发生在空格之一之后，如果换行算法先用逗号尝试过换行并且无法使行适合。

我尝试将文本片段包装在<span>元素中，但这似乎没有任何帮助。

<html>
  <head>
      <style type="text/css">
        div.box { width: 180px; }
        table, table td { 
          border: 1px solid; 
          border-collapse: collapse; 
        }
      </style>
  </head>
  <body>
    <div class="box">
      <table>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>
            <span>Honey Nut Cheerios,</span>
            <span>Wheat Chex,</span>
            <span>Grape-Nuts,</span>
            <span>Rice Krispies,</span>
            <span>Some random cereal with a very long name,</span>
            <span>Honey Bunches of Oats,</span>
            <span>Wheaties,</span>
            <span>Special K,</span>
            <span>Froot Loops,</span>
            <span>Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
      </tr>
      </table>
    </div>
  </body>
</html>

注意：看起来CSS3text-wrap: avoid行为是我想要的，但是我似乎无法使其正常工作。

阅读 479

2020-05-16

共1个答案

小编典典

通过使用

span.avoidwrap { display:inline-block; }

并将要保留的文本包装在一起

<span class="avoidwrap"> Text </span>

它将首先包装在首选块中，然后根据需要包装成较小的碎片。

2020-05-16