CSS最后一行：控制寡妇和孤儿

最新推荐文章于 2024-08-20 13:42:14 发布

cungui5726

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量412

点赞数

文章标签： css html python js java ViewUI

原文链接：https://thenewcode.com/946/CSS-last-line-Controlling-Widows-amp-Orphans

版权

While CSS has many options for controlling the first-line of text, it’s ability to control the last line is limited, although not without some uses:

尽管CSS有许多控制文本first-line的选项，但控制最后一行的能力是有限的，尽管并非没有某些用途：

残留物和碎片 (Remnants & Fragments)

“Widows” and “orphans” refer to a word or line of text that is laid out on the page in a way that disturbs reading flow and the “look” of the page: most commonly, words that are left dangling at the end of paragraphs. In paginated media, this is commonly seen as end-of-paragraph words that fall onto the next page:

“寡妇”和“孤儿”指的是在页面上布置的单词或文本行，其方式会干扰阅读流程和页面的“外观”：最常见的是，单词悬空在单词末尾段落。在分页媒体中，这通常被视为落在下一页的段落结尾词：

Browser’s don’t have a concept of “pages” for the screen, but widows can come up when a site is printed, and should be controlled for:

浏览器的屏幕上没有“页面”的概念，但是在打印站点时可能会出现寡妇，因此应该控制以下行为：

p { widows: 3; }

This translates to “if a paragraph breaks to the next printed page, the remnant must consist of at least three lines.” A browser that supports the property will space elements in such a way as to make that happen:

这表示“如果段落中断至下一个打印页面，则剩余部分必须至少包含三行。” 支持该属性的浏览器将以这种方式来分隔元素：

“Orphans”, on the other hand, occur at the start of text blocks. The most common example is a paragraph that starts at the bottom of a page:

另一方面，“孤儿”出现在文本块的开头。最常见的示例是从页面底部开始的段落：

Again, it can be controlled with by setting the orphans property to a reasonable value:

同样，可以通过将orphans属性设置为合理的值来控制它：

p { orphans: 3; }

Meaning: a paragraph must start with at least three lines on a page before it can be broken; otherwise, the paragraph should start on a new page.

意思是：一个段落在被折断之前必须在页面上至少以三行开头；否则，该段落应在新页面上开始。

The result:

结果：

alt — An example of solved orphaned text

建议使用 (Suggested Use)

Both widows and orphans should have reasonable default values set in site stylesheets:

widows和orphans都应在网站样式表中设置合理的默认值：

p { widows: 3; orphans: 3: }

While elements like headings can also have dangling or leading fragments, it’s more common to treat then with page-break controls than widows and orphans.

尽管诸如标题之类的元素也可能具有悬空或前导的片段，但是与widows和orphans相比，使用page-break控件更常见。

哪个是哪个？ (Which Is Which?)

An easy (if somewhat Dickensian) way to remember the terms:

记住这些术语的简单方法(如果有点狄更斯式的话)：

Orphans are “left alone at the beginning”.
孤儿是“一开始就任重而道远”。
Widows are “left alone at the end”.
寡妇是“末日独居”。

屏幕上的寡妇和孤儿 (Widows & Orphans on Screen)

By its very nature, responsive design creates innumerable fragments of widowed text. Some of these can be treated by intelligent use of hyphens and justification, but others are simply unavoidable.

就其本质而言，响应式设计会创建无数的寡妇文本片段。其中一些可以通过智能使用连字符和理由来解决，而其他一些则是不可避免的。

Many resources will tell you that widows and orphans properties can only be used in print, but that’s not true: in supportive browsers, the properties can also be applied to newspaper-style web column layouts, which often experience the same problems:

许多资源将告诉您， widows和orphans属性只能在印刷中使用，但事实并非如此：在支持的浏览器中，这些属性还可以应用于报纸样式的Web列布局，这些布局经常遇到相同的问题：

The prefix-free CSS, together with a solution for orphaned text:

无前缀CSS以及孤立文本的解决方案：

div {
	column-count: 2;
	column-gap: 2rem;
}
p {
	line-height: 1.6;
	font-size: 1rem;
	orphans: 2;
}

Result:

结果：

I assume that this same ability will be applied to CSS Regions, once the spec is fully supported in browsers.

我假设一旦浏览器完全支持该规范，该功能也将应用于CSS区域。

单线拟合 (Single-Line Fits)

The most egregious case of text widows occur in headings, where terminating words are often left dangling on a new line. There are solutions for this: FitText is a JQuery plugin that resizes text dynamically as the browser resizes; Chris Coyier’s technique inserts non-breaking spaces, and there are also SVG solutions. My personal preference is to use vw units to fit heading text on a single line, although this often requires some calculation and experimentation; I hope to create a “FitterText” script in the near future that can apply the correct vw measurement once to text elements, with no recalculation-on-viewport-resize required.

文本寡妇最令人震惊的情况是出现在标题中，其中终止词经常悬在一行上。为此，有一些解决方案： FitText是一个JQuery插件，可以在浏览器调整大小时动态调整文本大小。克里斯·科耶尔(Chris Coyier)的技术插入了不间断的空格，并且还有SVG解决方案。我个人的喜好是使用vw单位将标题文本放在一行上，尽管这通常需要进行一些计算和实验；我希望在不久的将来创建一个“ FitterText”脚本，该脚本可以一次将正确的vw度量应用于文本元素，而无需重新计算视口大小。

浏览器支持 (Browser Support)

Support for widows and orphans is very good: as of this writing, Firefox lacks any awareness of the properties, but all other modern browser versions have excellent support. As such, the properties should be considered progressive enhancement for a site: finishing touches that are great to have and are well-appreciated by users, but not super-critical for page content.

对widows和orphans支持非常好：在撰写本文时，Firefox并不了解这些属性，但是所有其他现代浏览器版本均提供了出色的支持。因此，应将属性视为网站的渐进增强功能 ：完成的触摸效果很好，并得到用户的赞赏，但对于页面内容而言并非至关重要。