在HTML中，是否可以插入换行提示？

Question

假设我在一个DIV中有一行长且包含多个单词的文本：

Hello there, dear customer. Please have a look at our offer.

这个DIV的宽度是动态变化的。我想要让上面的文本自动换行。目前，文本会按照单词边界进行换行，并且会优先最大化第一行的长度：

|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.

我希望换行发生在句子结尾处。但是，如果不需要换行，我希望该行保持为单行。

为了说明我的观点，请看各种 DIV 宽度以及我希望文本如何换行：

|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer. 
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear 
customer. 
Please have a look
at our offer.

使用软连字符，您可以在建议的音节边界处进行单词换行。 如果不需要换行，则 ­ 保持不可见。 如果需要换行，则 ­ 就是它发生的地方:

magnifi­cently

在HTML中有没有类似于调整单词换行的方法？

- Krystian Cybulski

Answer 1

在单词之间使用­或<wbr>标签，因为<wbr>标签不会引入连字符。

也可参考：

• quirksmode：<wbr> 兼容性列表

- Zeta

---

我注意到Google的Web应用程序（如Gmail）甚至在单词内部也使用<wbr>。 - hippietrail

Answer 2

并非完全准确，但很接近: http://jsfiddle.net/uW4h8/1/.

简而言之，您应该为文本容器设置white-space: nowrap;，并使用<wbr>在所需的单词间插入换行符。

- Alexander Pavlov

---

+1：下次请在您的代码旁边包含一个简短的摘要，因为您还提供了<wbr>作为可能的解决方案。 - Zeta

Answer 3

元素<wbr>和 通常可以使用，但并非总是如此。当设计一个静态的着陆页时，它必须在各种屏幕和浏览器上运行，并且必须看起来不错，它们尤其有问题。

在这种情况下，我希望在各种不同的屏幕分辨率下控制换行提示。为此，我使用<br>标签和CSS。如果它变得复杂，它可能会变得混乱，但我发现它在一定程度上有效。例如：

<p class='break-hints'>
Hello there, dear customer. <br class='break-big'>
Please have a look <br class='break-small'> at our offer.
</p>

我使用CSS媒体查询来指示何时触发各种断点。

p.break-hints br {
  display: none;
}

@media only screen and (max-width: 300px) { 
  p.break-hints br.break-small {
    display: inline;
  }
}

p.break-hints br.break-big {
  display: inline;
}

- speedplane

Answer 4

在单词之间不希望换行时，请使用不间断空格U+00A0（如果您没有便捷的输入该字符的方式，则使用 ），否则请使用普通空格。

当单词包含连字符“-”等某些字符时，此方法将无效，有些浏览器也会将括号等其他字符视为允许在它们之后换行。请参见http://www.cs.tut.fi/~jkorpela/html/nobr.html，其中包括各种应对问题的技巧。但如果您只有普通单词和常规标点符号而没有连字符，则使用简单的方法即可达到预期效果。

- Jukka K. Korpela

Answer 5

我刚遇到了同样的问题。我的文本如下：

<div>Assistant Something / Anything Pabulum Nautical</div>

在以 / 字符为分界点的地方进行断行，可以大大提高可读性。

在我的情况下，我通过使用内联块（现在似乎是 inline flow-root）元素来包裹需要“较低换行优先级”的块来解决这个问题：

<div><span class="inline">Assistant Something</span> / <span class="inline">Anything Pabulum Nautical</span></div>

请参见代码片段以获取结果。

.d {
  margin: 1em;
}

#b span {
  display: inline-block;
}

<div class="d" id="a">Assistant Something / Anything Pabulum Nautical</div>

<div class="d" id="b"><span>Assistant Something</span> / <span>Anything Pabulum Nautical</span></div>

- Nick