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

109

假设我有要在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行为是我想要的，但是我似乎无法使其正常工作。

html  css  word-wrap 
— 杰森·S
source
您可以在跨度内使用不间断空格。
— 加布里埃莱·彼得里奥利
3
但我不希望使用非 -breaking空间。我很想使用“不想在这里破裂，但是如果我愿意的话，我会”空间，但是据我所知，那些空间确实存在。
— Jason S
@Jason ..我感觉到你..但是不可能..添加了答案。
— 加布里埃莱·佩特里奥利
德拉特，当计算机科学家编写印刷算法而没有印刷者的输入时，就会发生这种情况。
— 杰森S
1
您应该接受@EggertJóhannesson的回答，因为它提供了一个很好的解决方法！
— Gabriele Petrioli 2014年

Answers:

156

通过使用

span.avoidwrap { display:inline-block; }

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

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

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

— 埃格特·约翰内森
source
16
很棒！仅需注意一点：内联块的开始和结尾处的空格将被忽略，因此要按空格分隔块中的文本，您需要将其放置在内联块之间。例如，如果将跨度设置为成为内联块，<span>Hello </span><span> world</span>则将为Helloworld，<span>Hello</span> <span>world</span>将为normal Hello world。
— 用户
2
<wbr>更具语义，并且将控制权留在浏览器中，这通常是一件好事。在这种情况下，可以打破生命。
— 罗德韦克
效果很好-重要的是，字符如“-”不间断。范例：Perikles <span class =“ avoidwrap”>（um＆nbsp; 500-429＆nbsp; v.Chr。）</ span>
— 莎拉树
10
@Lodewijk：<wbr>并不表示首选的换行位置，而是可能的换行位置。
— Dan Dascalescu 2015年
1
请注意，该技术也适用于嵌套<span>s，因此（实际上）您可以指定首选断点的层次结构。
— Michael Dyck
24

我更喜欢Dan Mall提供的一种非常简洁的RWD解决方案。我将在此处添加它，因为有关响应式换行符的其他一些问题被标记为与此重复的问题。
就您而言，您将：

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

以及媒体查询中的一行CSS：

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}
— 斯蒂芬·温霍尔德（Stephan Weinhold）
source
7

一个简单的答案是使用零宽度的空格字符， &#8203;该字符用于在单词中的特定点处创建空格。

是否完全相反的的非破空间 &nbsp;（当然，实际上是字木匠 &#8288;）（字木匠是零宽度版本不间断空格）

（还有其他一些不间断的代码，例如不间断的连字符 &#8209;）（这是对nbsp的不同“变体”的广泛回答）

如果您只想使用HTML（无CSS / JS）解决方案，则可以使用零宽度空格和不间断空格的组合，但这确实很麻烦，并且编写易于阅读的版本需要花费一些精力。

ctrl+ c，ctrl+ 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呈现尚未完全标准化，因此该解决方案不使用CSS / JS，因此对这种用法很有用。

另外，如果将此方法与任何<span>基于-的解决方案结合使用，则将完全控制换行算法

（版本说明：）

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

— 社区
source
1
什么是跨度黑客？
— 杰森S
其他答案则使用span标签。
我还想指出的是，尽管该解决方案似乎不是最简单的，但却是最可靠的，因为这些实体通常不会在浏览器，电子邮件解析器或任何其他HTML解析器中更改语义表示。
3

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

但是有一些解决方法（最好的一种是公认的答案）

您可以使用不间断空格靠近，&nbsp;但只能在一起使用的单词之间（跨度，但不能在逗号后），或者可以使用white-space:nowrap@Marcel。

两种解决方案都做同样的事情，而两者都不会如果它们本身不适合破坏一组单词。

— 加布里埃莱·彼得里奥利（Gabriele Petrioli）
source
啊 :-(发臭，那就意味着我要么不得不忍受它，或者我需要尝试检测，试图打败线决胜算法对我自己的长行。
— 贾森小号
我编辑了您的答案以提供解决方法的链接，因为由于您第一行的用词方式，我几乎没有继续阅读。
— arootbeer
@arootbeer：我支持您的编辑，但Gaby还原了它。加比：为什么？您想误导用户吗？
— Dan Dascalescu 2015年
@DanDascalescu，是否所有答案都应该更改为指向同一页面中被接受的答案？我的答案是1（和）票，有48票是可接受的答案。我非常确定，被接受的人就是引起关注的人（当然是这样）。除此之外，我坚持认为没有办法更改所使用的中断算法（正如OP所要求的）
— Gabriele Petrioli 2015年
1
检查我的解决方案是否使用您自己的逻辑。结合使用任何跨度解决方案，您就可以完全控制换行算法
2

与您的标记以上使用span { white-space:nowrap }。确实如您所料。

— 马塞尔
source
谢谢，但是那行不通，因为它基本上将span元素中&nbsp;的空格转换为，并且根本不会破坏空格。我只是想阻止渲染器闯入我的一项，但是，如果必须的话，我希望它这样做。
— Jason S
@Jason S：我已经在答案中添加了其他选项。
— Marcel
如何是&nbsp;<wbr>不是空间有什么不同？据我所知，选择是给定角色允许休息还是不允许休息。因此，'-'和''和&#8203;and <wbr>和&shy;所有允许中断（分别打印连字符，空格，无，无和仅断字符），而&nbsp;不允许。
— 杰森S
@Jason S：添加了示例用法。
— Marcel
我只是试过了，它似乎没有比换行的优先级高。重点是我需要的。如果不同字符或元素的破坏行为是“是”或“否”，那么我的问题没有解决方案。如果有相对的换行优先级，那么我可能有解决方案。
— 杰森S
0

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

HTML5引入了<wbr>标签。（它代表分词机会。）

添加一个<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之外，我所有的主要浏览器都支持它。

— 艺人
source
12
-1。为什么在建议之前不进行测试？没用 <wbr>还有另一个目的 更不用说这个答案是很久以前存在的答案的重复。
— 用户
1
— Lodewijk 2014年
13
<wbr>只是建立休息的机会；它不会“告诉浏览器先于其他位置中断”。在空格之前使用它通常是无用的，因为空格通常是换行的机会。
— Jukka K. Korpela 2014年
5
在任何浏览器中，这根本不起作用。答案是错误的：<wbr>它不会优先于普通的空白换行符。因此，在示例中，换行只是正常进行。
— 阿德里安
3
为了明确起见，<wbr>旨在表示“您可以在这里休息的地方”，否则该位置将被视为单词内。它说“对待这两个角色之间的位置，好像那里有一个空格”，而不是“喜欢在这里打破”。如果已经有空格，则<wbr>没有任何意义。
— 分号
-1

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

text {
    margin-right: 20%;
}
— flor
source
-3

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

— 公正者
source
-5

该™有一个HTML元素：（现在已标准化）<wbr>元素。

我建议您使用它。它可能无法在任何地方都有效，但它是您最好的选择，而不用担心。

— 马蒂亚斯·拜恩斯（Mathias Bynens）
source
3
-1：<wbr>用于在很长的单词上标记断点，但不能解决首选换行符的问题
— 用户
4
@ user3075942 规范的直接引文：“该wbr元素表示换行机会。” 这正是 OP所要求的。停止根据您在Wiki上阅读的内容来投票给他人。
— Mathias Bynens 2014年
3
是的，机会。但是浏览器已经有机会打破空白。问题是如何告诉浏览器最好在哪个空间打断。
— 用户
1
…答案是使用<wbr>。
— Mathias Bynens 2014年
8
不，那不是答案。它不会增加使用特定的预先存在的断点可能性的可能性；它仅添加一个新的断点可能性，而该断点可能性尚不存在。连续有两个可能性是没有用的。developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
— Torin Finnemann 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.