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

Posted 2023-02-24

【中文标题】在 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.

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

magnifi­cently

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

【参考方案1】：

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

另见：

quirksmode: <wbr> compat list

【讨论】：

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

【参考方案2】：

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

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

【讨论】：

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

【参考方案3】：

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

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

【参考方案4】：

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

当单词包含连字符“-”时，这将不起作用，并且某些其他字符（例如括号）也可能导致问题，因为某些浏览器将它们视为允许在它们之后换行。请参阅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>