表示换行符的首选位置

2022-06-20 00:00:00 word-wrap html 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>

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

解决方案

使用

span.avoidwrap { display:inline-block; }

并将我要放在一起的文本换行

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

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

相关文章