Question

假设我有这个文本要显示在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渲染器在某个指定位置尝试中断，并在尝试在其中一个空格之后断开之前先执行此操作，不使用使用不间断空格？如果我使用不间断的空格，那么它会无条件地增大宽度。如果换行算法首先使用逗号尝试并且无法使行适合，我希望换行符发生在其中一个空格之后。

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

<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行为是我想要的，但我似乎无法让它发挥作用。

Answer 1

使用

span.avoidwrap { display:inline-block; }

并将我希望保留在一起的文字包裹在

中

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

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

Answer 2

我更喜欢来自The Golden Standard的非常简洁的RWD解决方案。我将在这里添加它，因为有关响应性换行符的其他一些问题被标记为这个问题的副本在你的情况下，你有：

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

媒体查询中有一行CSS：

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}

Answer 3

答案是否定的（您不能改变使用的换行算法）。

但有一些解决方法（最好的一个是accepted answer ）

你可以使用非破坏空间 ，但只能在一起使用的单词之间（你在跨度中有的，但不能在逗号之后），或者你可以使用white-space:nowrap作为@Marcel提到。

两个解决方案都做同样的事情，如果它不适合自己，那么不都会破坏一组单词。

Answer 4

使用上面的标记span { white-space:nowrap }。它真的很棒。

Answer 5

现在我们有了新的答案HTML5：

HTML5引入了标记。（它代表断字机会。）

添加告诉浏览器在其他任何地方之前中断，所以在逗号之后很容易让单词中断：

Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks

除了IE之外，它支持我的所有主流浏览器。

Answer 6

一个简单的答案是使用零宽度空格字符 它用于在特定点的单词内部创建 breakspaces 。

非破坏空间  的完全相反（实际上， word-joiner {{1} （ word-joiner 是非破坏空间的零宽度版本）

（还有其他非破坏性代码，例如非破坏连字符 ⁠）(here is an extensive answer on different 'variants' of nbsp)

如果您想要一个仅限HTML（无CSS / JS）的解决方案，您可以使用零宽度空间和非中断空间的组合，但是这将是 messy ，编写一个人类可读的版本需要一点努力。

ctrl + c ， ctrl + v 帮助

示例：

&#8209;

不可读？这是相同的HTML，没有评论标签：

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

然而，由于电子邮件html呈现并未完全标准化，因此该解决方案使用 no CSS / JS

此外，如果您将此项与任何基于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的解决方案结合使用，您将完全控制换行算法

（编者注：）

我能看到的唯一问题是，如果您想动态更改首选破损点。这需要对每个跨度按比例大小进行常量JS操作，并且必须在文本中处理这些HTML实体。

Answer 7

您应该做的事情（按照预期使用 Unicode）提供了最好的结果：

<table border="1">
  <thead>
    <tr><th>Method</th><th>Results</th></tr>
  </thead>
  <tbody>
    <tr><td>&lt;wbr></td><td>Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape&#8209;Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks</td></tr>
    <tr><td>U+200B Zero width Space</td><td>Honey Nut Cheerios,&#8203;Wheat Chex, &#x200b;Grape&#8209;Nuts, &#x200b;Rice Krispies, &#x200b;Some random cereal with a very long name, &#x200b;Honey Bunches of Oats, &#x200b;Wheaties, &#x200b;Special K, &#x200b;Froot Loops, &#x200b;Apple Jacks</td></tr>
    <tr><td>U+00A0 No&#8209;break Space</td><td>Honey&nbsp;Nut&nbsp;Cheerios, Wheat&nbsp;Chex, Grape&#8209;Nuts, Rice&nbsp;Krispies, Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name, Honey&nbsp;Bunches&nbsp;of&nbsp;Oats, Wheaties, Special&nbsp;K, Froot&nbsp;Loops, Apple&nbsp;Jacks</td></tr>
  </tbody>
</table>

Answer 8

您只需调整CSS中的边距设置（在这种情况下为margin-right）。

text {
    margin-right: 20%;
}

Answer 9

使用<div>代替，或为SPAN指定一个类，并为其指定 display：block 属性。

Answer 10

该™有一个HTML元素：the (now standardized)  element。

我建议你使用它。它可能不起作用everywhere，但它是你不用经过篮球就能做到的最好的。

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

10 个答案: