有没有办法自动控制HTML文档中的孤立单词?

Jos*_*ius 14 html javascript css typography

我想知道是否有办法自动控制 HTML文件中的孤立单词,可能是通过使用CSS和/或Javascript(或其他东西,如果有人有其他建议).

通过'孤儿词',我的意思是在段落末尾出现在新行上的单数词.例如:

"This paragraph ends with an undesirable orphaned
word."

相反,最好让段落中断如下:

"This paragraph no longer ends with an undesirable
orphaned word."

虽然我知道我可以通过 在最后两个单词之间放置一个HTML不间断空格()来手动纠正这个问题,但我想知道是否有办法自动化这个过程,因为像这样的手动调整对于大块来说很快就会变得乏味跨多个文件的文本.

顺便说一句,CSS2.1属性orphans(和widows)仅适用于整行文本,甚至仅适用于HTML页面的打印(更不用说这些属性在很大程度上不受大多数​​主流浏览器的支持).

许多专业的页面布局应用程序,例如Adobe InDesign,可以通过自动添加孤立发生的非破坏空间来自动删除孤儿; 是否有任何类型的HTML等效解决方案?

Sha*_*hin 26

您可以通过用不间断的空格( )替换句子中最后两个单词之间的空格来避免孤立的单词.

有插件可以做到这一点,例如jqWidon't这个jquery片段.

也有流行的框架插件(如typogrify的Django和widon't为WordPress),基本上做同样的事情.


jos*_*978 5

我知道你想要一个 javascript 解决方案,但如果有人发现这个页面是一个解决方案,但对于电子邮件(其中 Javascript 不是一个选项),我决定发布我的解决方案。

使用 CSS white-space: nowrap。所以我所做的是将最后两三个词(或我想要“break”所在的任何地方)括在一个跨度中,添加一个内联 CSS(记住,我处理电子邮件,根据需要创建一个类):

<td>
    I don't <span style="white-space: nowrap;">want orphaned words.</span>
</td>
Run Code Online (Sandbox Code Playgroud)

在流畅/响应式布局中,如果你做对了,最后几个单词将中断到第二行,直到有空间让这些单词出现在一行上。

white-space在此链接上阅读有关该物业的更多信息:http : //www.w3schools.com/cssref/pr_text_white-space.asp

编辑:2015 年 12 月 19 日 - 由于 Outlook 不支持此功能,因此我一直&nbsp;在句子中的最后两个单词之间添加一个不间断空格。它的代码更少,并且到处都受支持。

编辑:2/20/2018 - 我发现 Outlook 应用程序(iOS 和 Android)不支持&nbsp;实体,所以我不得不结合这两种解决方案:例如:

<td>
    I don't <span style="white-space:nowrap;">want&nbsp;orphaned&nbsp;words.</span>
</td>
Run Code Online (Sandbox Code Playgroud)


小智 3

简而言之,不。多年来,这一直让印刷设计师疯狂,但 HTML 不提供这种级别的控制。

如果你绝对想要这个,并且了解速度的影响,你可以尝试这里的建议:

用 jQuery 检测换行符?

这是我能想象的最好的解决方案,但这并不意味着它是一个好的解决方案。