在 HTML 中，是否可以插入自动换行提示？答案

【问题标题】：In HTML, is it possible to insert a word wrapping hint?在 HTML 中，是否可以插入自动换行提示？
【发布时间】：2012-04-19 10:46:29
【问题描述】：

假设我在一个 DIV 中有一个长的、多字的文本行：

您好，亲爱的顾客。请查看我们的报价。

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.

对于单词，您可以使用软连字符，以便在建议的音节边界上自动换行。如果不需要包装，&shy; 将保持不可见。如果需要包装，&shy; 就是它发生的地方：

magnifi&shy;cently

是否有类似的方法在 HTML 中提示自动换行？

【问题讨论】：

标签： html word-wrap soft-hyphen wbr

【解决方案1】：

在单词中使用&shy; 或在单词之间使用，因为 不会引入连字符。

另见：

quirksmode:  compat list

【讨论】：

我注意到，Gmail 等 Google 网络应用程序甚至在文字中也使用 。

【解决方案2】：

不完全准确，但很接近：http://jsfiddle.net/uW4h8/1/。

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

【讨论】：

+1：下次请包含您的代码的简短摘要，因为您还提供了  作为可能的解决方案。

【解决方案3】：

元素 和&nbsp; 经常有效，但并非总是如此。在设计静态登录页面时，它们尤其成问题，该页面 (a) 必须在各种屏幕和浏览器上工作，并且 (b) 必须看起来不错。

在这种情况下，我想控制各种不同屏幕分辨率的换行提示。为此，我使用  标签和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;
}

【讨论】：

【解决方案4】：

当不允许换行时，在单词之间使用不间断空格 U+00A0（或 &nbsp;，如果您无法方便地输入字符），否则使用正常空格。

当单词包含连字符“-”时，这将不起作用，并且某些其他字符（例如括号）也可能导致问题，因为某些浏览器将它们视为允许在它们之后换行。请参阅http://www.cs.tut.fi/~jkorpela/html/nobr.html 以获得冗长的论文，包括应对问题的各种技术。但是，如果您的单词只有正常的标点符号而没有连字符，那么简单的方法应该没问题。

【讨论】：

【解决方案5】：

我也遇到了同样的问题。我有如下文字：

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

在/ 字符之后打破它确实有助于提高可读性。

就我而言，我通过用 inline-block（现在显然是 inline flow-root）元素包装所需的“低换行优先级”块来解决它：

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

查看 sn-p 了解结果。

.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>

【讨论】：