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

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

html css

html（css）：表示换行符的首选位置,html,css,word-wrap,Html,Css,Word Wrap,假设我想在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表格单元格中显示以下文本：

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>


div.box{宽度：180px；}
表，表td{
边框：1px实心；
边界塌陷：塌陷；
}
乱数假文
乱数假文
乱数假文
乱数假文
蜂蜜坚果雪糕，
小麦糖，
葡萄仁，
米脆饼，
一些名字很长的随机谷物，
蜂蜜燕麦串，
小麦，
特别K,，
弗罗特环，
苹果千斤顶
乱数假文

注意：该行为似乎是我想要的，但我似乎无法使其正常工作。

使用

而不是

，或者为SPAN指定一个类并为其指定display:block属性。

使用

而不是

，或者为SPAN指定一个类，并赋予它display:block属性。

使用上面的标记使用

SPAN{white space:nowrap}

。它真的像你期望的那样好。

使用上面的标记

span{white space:nowrap}

。这真的是你所期望的那样好。

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

但是有一些解决办法（最好的是
您可以使用不间断空格
，但只能在一起的单词之间使用（您在跨距中使用的空格，但不能在逗号之后），或者您可以使用@Marcel提到的
空白：nowrap
两种解决方案的作用是相同的，如果一组单词本身不适合，两种解决方案都不会打断它。
答案是否定的（您不能更改所使用的换行算法）
但是有一些解决办法（最好的是
您可以使用不间断空格
，但只能在一起的单词之间使用（您在跨距中使用的空格，但不能在逗号之后），或者您可以使用@Marcel提到的
空白：nowrap

两种解决方案都做相同的事情，如果一组单词本身不适合，它们都不会打断它。
有一个HTML元素™: .

我建议你用这个。它可能不起作用，但这是最好的方法，而不必经历麻烦。
有一个HTML元素用于此™: .
我建议你用这个。它可能不起作用，但这是你在不经历困难的情况下所能做的最好的事情。
使用

span.avoidwrap { display:inline-block; }
并将我想要保存在一起的文本包装起来

 Text 

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

span.avoidwrap { display:inline-block; }
并将我想要保存在一起的文本包装起来

 Text 

文本

它将首先包装在首选块中，然后根据需要包装在更小的片段中。
新答案现在我们有了HTML5：
HTML5引入了
标记。（它代表断字机会。）
添加一个
会告诉浏览器在其他地方之前先在那里断开，因此很容易在逗号后使单词断开：

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

蜂蜜坚果Cheerios、小麦Chex、葡萄坚果、米脆饼、一些名字很长的随机谷物、蜂蜜燕麦串、麦片、特殊K、弗罗特圈、苹果杰克

除了IE，我的所有主要浏览器都支持它。
新答案现在我们有了HTML5：
HTML5引入了
标记。（它代表断字机会。）
添加一个
会告诉浏览器在其他地方之前先在那里断开，因此很容易在逗号后使单词断开：

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

蜂蜜坚果Cheerios、小麦Chex、葡萄坚果、米脆饼、一些名字很长的随机谷物、蜂蜜燕麦串、麦片、特殊K、弗罗特圈、苹果杰克

除了IE之外，我的所有主要浏览器都支持它。
我更喜欢一个非常简洁的RWD解决方案。我将在这里添加它，因为其他一些关于响应换行符的问题被标记为与此问题重复的问题。
在你的情况下，你会：

Honey Nut Cheerios, Wheat Chex, etc.

有一个非常整洁的RWD解决方案，我更喜欢。我将在这里添加它，因为其他一些关于响应换行符的问题被标记为与此问题重复的问题。
在你的情况下，你会：

Honey Nut Cheerios, Wheat Chex, etc.

一个简单的答案是使用零宽度空格字符用于在特定点的单词内部创建分隔符与不间断空格完全相反（实际上是单词连接符⁠；）（单词连接符是不间断空格的零宽度版本）（还有其他非中断代码，如非中断连字符和#8209；）如果您想要一个仅HTML（无CSS/JS）的解决方案，您可以使用零宽度空间和不间断空间的组合，但是这将非常混乱，编写一个人类可读的版本需要一点努力 ctrl+c，ctrl+v有帮助例如： 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呈现并不完全相同