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

Is there a way to automatically control orphaned words in an HTML document?

本文关键字：单词 文档 自动控制 HTML 有没有      更新时间：2023-09-26

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

我所说的"孤立词"是指出现在段落末尾新行上的单数词。 例如：

"这一段以一个不受欢迎的孤儿结束字。

相反，最好将段落分隔符如下：

"本段不再以不受欢迎的结尾孤儿字。

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

顺便说一下，CSS2.1 属性orphans(和widows(仅适用于整行文本，即使如此也仅适用于 HTML 页面的打印(更不用说大多数主流浏览器在很大程度上不支持这些属性的事实(。

许多专业的页面布局应用程序(如 Adobe InDesign(可以通过自动添加出现孤立项的不间断空格来自动删除孤立项; HTML是否有任何等效的解决方案？

您可以通过将

句子中最后两个单词之间的空格替换为不间断空格 (   ( 来避免孤立单词。

有一些插件可以做到这一点，例如jqWidon't或这个jquery片段。

还有一些流行框架的插件(例如用于django的typogrify和用于wordpress的widon't(，它们基本上可以做同样的事情。

我知道

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

使用 CSS white-space: nowrap 。所以我所做的是将最后两三个单词(或我希望"中断"所在的任何位置(括在一个范围内，添加一个内联 CSS(请记住，我处理电子邮件，根据需要创建一个类(：

<td>
    I don't <span style="white-space: nowrap;">want orphaned words.</span>
</td>

在流畅/响应式布局中，如果操作正确，最后几个单词将中断到第二行，直到这些单词有空间出现在一行上。

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

编辑：12/19/2015 - 由于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>

简而言之，没有。这是多年来让打印设计师发疯的事情，但HTML不提供这种级别的控制。

如果您绝对肯定地想要这样做，并且了解速度影响，您可以尝试此处的建议：

使用 jQuery 检测换行符？

这是我能想象到的最好的解决方案，但这并不能使它成为一个好的解决方案。

我看到建议使用第三方插件，但自己做更简单。 如果您只想用不间断的空格替换最后一个空格字符，那几乎是微不足道的：

    const unorphanize = (str) => {
        let iLast = str.lastIndexOf(' ');
        let stArr = str.split('');
        stArr[iLast] = '&nbsp;';
        return stArr.join('')
}

我想这可能会错过一些独特的情况，但它适用于我的所有用例。 需要注意的是，您不能只是将输出插入文本的位置，您必须设置innerHTML = unorphanize(text)或以其他方式解析它

如果你想

自己处理它，没有jQuery，如果你愿意做几个假设，你可以写一个javascript片段来替换文本：

  1. 句子总是以句号结尾。
  2. 您总是希望将最后一个单词之前的空格替换为 &nbsp;

假设你有这个 html(在我的浏览器中，它的样式设置为在"结束"之前中断......猴子的宽度(如果需要(：

<div id="articleText" style="width:360px;color:black; background-color:Yellow;">
    This is some text with one word on its own line at the end.
    <p />
    This is some text with one word on its own line at the end.
</div>

你可以创建这个javascript并将其放在页面的末尾：

<script type="text/javascript">
    reformatArticleText();
    function reformatArticleText()
    {
        var div = document.getElementById("articleText");
        div.innerHTML = div.innerHTML.replace(/'S('s*)'./g, "&nbsp;$1.");
    }
</script>

正则表达式只是查找空格字符('S(后跟任意数量的非空格字符('s(后跟句点的所有实例(使用g标志(。 它创建对可在替换文本中使用的非空格的反向引用。

您可以使用类似的正则表达式来包含其他结束标点符号。

如果第三方

JavaScript是一种选择，则可以使用typogr.js，这是一种JavaScript"typogrify"实现。不出所料，这个特殊的过滤器被称为Widont。

<script src="https://cdnjs.cloudflare.com/ajax/libs/typogr/0.6.7/typogr.min.js"></script>
<script>
document.body.innerHTML = typogr.widont(document.body.innerHTML);
</script>
</body>
相关文章：