html - 在 CSS 中有没有一种方法可以在不必使用额外的 HTML 的情况下防止寡妇？

Question

我有一行在内容管理系统中管理的副本。 CMS 不允许使用 HTML 或特殊字符，例如  或 <span> .

我试过弄乱边距和填充，但无法得到任何想要的结果。

文本是这样呈现的:

<h1>This is an example of the headline.</h1>

我想防止出现寡妇(出现在文本 block 底部的一个单独的词)，因此当该行确实中断时，它将最后 2 个词视为 1 个词。

例如，“the headline”会换行到下一行，而不仅仅是“headline”。

有没有办法只在 CSS 中做到这一点？

我很想在 CSS 中看到“white-space: no-widow”，但那不存在。

Answer 1

简短回答:不，据我所知没有办法做到这一点。

如果您可以将最后两个单词包装在一个带有 no-wrap 样式的 span 中，这可能会起作用。但我发现您无法在 CMS 中添加跨度。

您可以做的一件事:以 em 为单位设置 h1 的宽度，使其宽度与文本的大小成正比。通过这种方式，您可以设置一个宽度，强制标题在您想要的位置断开，并且该宽度将随文本缩放。