在 HTML/CSS 中处理排版时常见的问题是我们在瑞典称之为“horunge”(在英语中称为“widow”)。
它是什么:
假设你有一个宽度为 200px 的盒子,里面写着“我非常喜欢排版”。现在文字折行变成了:
我非常喜欢
排版
作为设计师,我不想要一个孤立的单词出现在一行上。如果这是一个文件/PDF 等等,我会在 very 前面断开单词,效果如下:
我非常喜欢
排版
看起来更好。
我能用 CSS 规则或 JavaScript 来解决这个问题吗?规则应该是不让一个单词空在一行上。
我知道可以通过添加 <br />
来解决,但这不适用于动态宽度、提供的内容、不同的翻译、浏览器字体渲染问题等。
更新(解决方案) 我使用了这个 jQuery 插件来解决我的问题:http://matthewlein.com/widowfix/