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渲染器在某个指定位置尝试破解,并且在尝试破坏其中一个空格之前先执行该操作, 而不使用非破坏空格? 如果我使用非破坏空间,那么无条件地增加宽度。 如果换行algorithm先用逗号先试过,并且不能使行符合,我希望在其中一个空格之后出现换行符。

我尝试在<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行为是我想要的,但我似乎无法得到它的工作。

    8 Solutions collect form web for “html(+ css):表示换行的首选位置”

    通过使用

     span.avoidwrap { display:inline-block; } 

    并把我想要保存在一起的文字包装起来

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

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

    我比较喜欢Dan Mall提供的非常简洁的RWD解决scheme。 我将在这里添加它,因为关于响应行换行的一些其他问题被标记为这个的重复。
    在你的情况下,你会有:

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

    在你的媒体查询中有一行CSS:

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

    用上面的标记使用span { white-space:nowrap } 。 它和你所期望的一样好。

    答案是否定的( 你不能改变使用的换行algorithm )。

    但有一些解决方法最好的一个是被接受的答案

    你可以靠近非破坏空间 但是只能放在一起的单词之间( 你有跨度,而不是逗号之后 ),或者你可以使用white-space:nowrap作为@Marcel提到的。

    两种解决scheme都是一样的,如果不适合自己,这两种解决scheme都不会破坏一组单词。

    现在我们有新的答案HTML5:

    HTML5引入了<wbr>标签。 (它代表Word Break Opportunity。)

    添加一个<wbr>告诉浏览器在其他地方之前打破,因此逗号之后的单词很容易被打破:

     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之外的所有主stream浏览器。

    一个简单的答案是使用零宽度空格字符 &#8203; 它用于在特定点上的文字内部制作空格

    非破坏空间 &nbsp; 相反&nbsp; (呃,实际上是单词joiner &#8288; )( 单词joiner 是非破坏空间的零宽版)

    (还有其他非破坏性的代码,如 &#8209; 连字符 ) (这里是关于nbsp的不同“变体”的广泛答案)

    如果你想要一个纯HTML(没有CSS / JS)的解决scheme,你可以使用零宽度空间非破坏空间的组合 ,然而,这将是非常混乱 ,编写一个人类可读的版本需要一点点努力。

    ctrl + cctrl + v帮助

    例:

      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:

      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的渲染没有完全标准化,因为这种解决scheme不使用CSS / JS ,所以对于这种使用是有好处的

    另外,如果您将这与基于任何基于解决scheme的解决scheme结合使用,则可以完全控制换行algorithm

    (社论说明:)

    我能看到你唯一的问题是,如果你想dynamic地改变首选破损点。 这将需要对每个跨度的比例大小进行持续的JS操作,并且必须处理文本中的HTML实体。

    使用<div>而不是<span> ,或者为SPAN指定一个类并为其指定display:block属性。

    该™有一个HTML元素:(现在是标准化的) <wbr>元素 。

    我build议你使用它。 它可能无法在任何地方工作,但这是最好的,你可以做,而不经过篮球。