31

想象一下，我在 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 中的自动换行？

4

5 回答 5

36

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

也可以看看：

于 2012-04-19T10:54:31.810 回答
11

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

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

于 2012-04-19T10:54:00.047 回答
4

这些元素经常起作用，但并非总是如此<wbr>。&nbsp;当设计一个静态登录页面时，它们尤其成问题，该页面 (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;
}
于 2016-01-04T22:41:55.583 回答
3

当不允许换行时，在单词之间使用不间断空格 U+00A0（或者&nbsp;如果您没有方便的方式输入字符），否则使用普通空格。

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

于 2012-04-19T12:58:39.900 回答
0

我只是有同样的问题。我有如下文字：

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

在/字符之后打破它真的有助于可读性。

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

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

于 2020-08-10T14:48:18.907 回答