javascript 有没有办法自动控制 HTML 文档中的孤立词?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8854138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to automatically control orphaned words in an HTML document?
提问by Josh M. Lenius
I was wondering if there's a way to automatically control orphaned wordsin an HTML file, possibly by using CSS and/or Javascript (or something else, if anyone has an alternative suggestion).
我想知道是否有一种方法可以自动控制HTML 文件中的孤立词,可能是通过使用 CSS 和/或 Javascript(或其他东西,如果有人有其他建议)。
By 'orphaned words', I mean singular words that appear on a new line at the end of a paragraph. For example:
我所说的“孤立词”是指在段落末尾的新行中出现的单数词。例如:
"This paragraph ends with an undesirable orphaned word."
Instead, it would be preferable to have the paragraph break as follows:
相反,最好将段落分隔如下:
"This paragraph no longer ends with an undesirable orphaned word."
While I know that I could manually correct this by placing an HTML non-breaking space (
) between the final two words, I'm wondering if there's a way to automate the process, since manual adjustments like this can quickly become tedious for large blocks of text across multiple files.
虽然我知道我可以通过
在最后两个单词之间放置一个 HTML 不间断空格 ( )来手动更正这个问题,但我想知道是否有办法自动化这个过程,因为像这样的手动调整对于大块来说很快就会变得乏味跨多个文件的文本。
Incidentally, the CSS2.1 properties orphans
(and widows
) only apply to entire lines of text, and even then only for the printing of HTML pages (not to mention the fact that these properties are largely unsupported by most major browsers).
顺便说一句,CSS2.1 属性orphans
(和widows
)仅适用于整行文本,甚至仅适用于 HTML 页面的打印(更不用说大多数主要浏览器基本上不支持这些属性的事实)。
Many professional page layout applications, such as Adobe InDesign, can automate the removal of orphansby automatically adding non-breaking spaces where orphans occur; is there any sort of equivalent solution for HTML?
许多专业的页面布局应用程序,例如 Adobe InDesign,可以通过在出现孤立点的地方自动添加不间断空格来自动移除孤立点;HTML 是否有任何等效的解决方案?
回答by Shawn Chin
You can avoid orphaned words by replacing the space between the last two words in a sentence with a non-breaking space (
).
您可以通过用不间断空格 (
)替换句子中最后两个单词之间的空格来避免孤词。
There are plugins out there that does this, for example jqWidon'tor this jquery snippet.
有一些插件可以做到这一点,例如jqWidon't或这个 jquery snippet。
There are also plugins for popular frameworks (such as typogrifyfor django and widon't for wordpress) that essentially does the same thing.
也有插件流行框架(如typogrify的Django和widon't为WordPress,基本上做同样的事情)。
回答by josh1978
I know you wanted a javascript solution, but in case someone found this page a solution but for emails (where Javascript isn't an option), I decided to post my solution.
我知道你想要一个 javascript 解决方案,但如果有人发现这个页面是一个解决方案,但对于电子邮件(其中 Javascript 不是一个选项),我决定发布我的解决方案。
Use CSS white-space: nowrap
. So what I do is surround the last two or three words (or wherever I want the "break" to be) in a span, add an inline CSS (remember, I deal with email, make a class as needed):
使用 CSS white-space: nowrap
。所以我所做的是将最后两三个词(或我想要“break”所在的任何地方)括在一个跨度中,添加一个内联 CSS(记住,我处理电子邮件,根据需要创建一个类):
<td>
I don't <span style="white-space: nowrap;">want orphaned words.</span>
</td>
In a fluid/responsive layout, if you do it right, the last few words will break to a second line until there is room for those words to appear on one line.
在流畅/响应式布局中,如果你做对了,最后几个单词将中断到第二行,直到有空间让这些单词出现在一行上。
Read more about about the white-space
property on this link: http://www.w3schools.com/cssref/pr_text_white-space.asp
white-space
在此链接上阅读有关该物业的更多信息:http: //www.w3schools.com/cssref/pr_text_white-space.asp
EDIT: 12/19/2015 - Since this isn't supported in Outlook, I've been adding a non-breaking space
between the last two words in a sentence. It's less code, and supported everywhere.
编辑:2015 年 12 月 19 日 - 由于 Outlook 不支持此功能,因此我一直
在句子中的最后两个单词之间添加一个不间断空格。它的代码更少,而且到处都受支持。
EDIT: 2/20/2018 - I've discovered that the Outlook App (iOS and Android) doesn't support the
entity, so I've had to combine both solutions: e.g.:
编辑:2/20/2018 - 我发现 Outlook 应用程序(iOS 和 Android)不支持
实体,所以我不得不结合这两种解决方案:例如:
<td>
I don't <span style="white-space:nowrap;">want orphaned words.</span>
</td>
回答by Jonathan Rich
In short, no. This is something that has driven print designers crazy for years, but HTML does not provide this level of control.
简而言之,没有。这是多年来让印刷设计师疯狂的事情,但 HTML 没有提供这种级别的控制。
If you absolutely positively want this, and understand the speed implications, you can try the suggestion here:
如果您绝对想要这个,并了解速度的影响,您可以尝试这里的建议:
detecting line-breaks with jQuery?
That is the best solution I can imagine, but that does not make it a good solution.
这是我能想象到的最好的解决方案,但这并不是一个好的解决方案。
回答by CD Jorgensen
If you want to handle it yourself, without jQuery, you can write a javascript snippet to replace the text, if you're willing to make a couple assumptions:
如果你想自己处理它,没有 jQuery,你可以编写一个 javascript 片段来替换文本,如果你愿意做几个假设:
- A sentence always ends with a period.
- You always want to replace the whitespace before the last word with
- 一个句子总是以句号结尾。
- 您总是想用 替换最后一个单词之前的空格。
Assuming you have this html (which is styled to break right before "end" in my browser...monkey with the width if needed):
假设你有这个 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>
You can create this javascript and put it at the end of your page:
您可以创建此 javascript 并将其放在页面的末尾:
<script type="text/javascript">
reformatArticleText();
function reformatArticleText()
{
var div = document.getElementById("articleText");
div.innerHTML = div.innerHTML.replace(/\S(\s*)\./g, " .");
}
</script>
The regex simply finds all instances (using the g
flag) of a whitespace character (\S
) followed by any number of non-whitespace characters (\s
) followed by a period. It creates a back-reference to the non-white-space that you can use in the replace text.
正则表达式只是查找g
空白字符 ( \S
) 后跟任意数量的非空白字符 ( \s
) 后跟一个句点的所有实例(使用标志)。它创建了对可在替换文本中使用的非空白区域的反向引用。
You can use a similar regex to include other end punctuation marks.
您可以使用类似的正则表达式来包含其他结束标点符号。
回答by K3---rnc
If third-party JavaScript is an option, one can use typogr.js, a JavaScript "typogrify" implementation. This particular filter is called, unsurprisingly, Widont.
如果第三方 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>