如何防止在HTML元素中的新行上只挂一个字？

Question

我正在构建一个包含一些营销内容的简单网页.我不喜欢的一件事是,如果一行文本太长,它将换行到下一行,这很好,但它经常包裹在新行上只有一个单词,从设计的角度来看,这只是个坏消息.

这样等并不一定困难.这样的产品使它变得
容易

我可以做些什么来动态确保每条悬挂线上至少有两个单词？

这样等并不一定困难.这样的产品使它
变得容易

Answer 1

简单的解决方案是在段落末尾的最后两个单词之间使用不间断的空格.

&nbsp;

<p>Such and such doesn't have to be difficult. Such and such product makes it&nbsp;easy</p>

如果你有很多内容,特别是如果它是由业务控制的话,这可能会变得乏味.在这种情况下,您可以找到一个库或编写一个解决方案,自动在每个段落的最后两个单词之间插入不间断空格.

类似地,你可以将最后两个单词包装在`<nobr>`标签中,例如 (2认同)
@Jon z - `<nobr>` 已过时 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr (2认同)

Answer 2

编辑:在最好的答案是干净多了-你或许应该使用来代替.我正在离开我的答案因为它确实有效并且它对于奇怪的情况有一些价值(例如,如果你使用短划线而不是空格,如果你不想使用 ,等等).

这是一个简洁的小解决方案.创建一个这样的CSS类:

.nobr { white-space:nowrap; }

任何具有"nobr"类的元素都不允许将空格(空格,制表符等)包装到新行上.所以用你的文字包围你文本的最后两个单词span.nobr.

<p>Such and such doesn't have to be difficult. Such and such product makes <span class="nobr">it easy</span></p>

Answer 3

我会使用<nobr>last two words.</nobr>标签。

这也带来了不切断您可能正在做的任何 HTML 繁荣的好处，例如：

<b>&ldquo;</b>Here's a big statement I don't want <nobr>cutting off<b>&rdquo;</b>.</nobr>

Answer 4

在 CSS 中，您可以使用text-wrap: pretty它。

p {
  text-wrap: pretty;
}

请注意，在发布时仅 Chrome 117 （当前的 Canary）text-wrap: pretty支持该功能，其他浏览器有望很快跟进。

另请参阅https://www.youtube.com/clip/UgkxMs0HXf1mwkTZQRrSwtWPxrmVsSHFmN8X，显示其行为方式以及与text-wrap: balance.