This screencast is a part of our AtoZ CSS Series.
该截屏视频是我们的AtoZ CSS系列的一部分。
More and more these days, CSS is being used to control the styling of things other than websites.
如今，越来越多CSS被用来控制网站以外的事物的样式。
One type of media that CSS can apply styling to is paged media – things like digital magazines and ebooks or a website in the form of a print stylesheet.
CSS可以将样式应用于媒体的一种类型是分页媒体，例如数字杂志和电子书或印刷样式表形式的网站。
There are some properties that only apply to this media type. The widows and orphans properties are two that allow us to control how lines of text flow around page breaks.
有些属性仅适用于此媒体类型。 widows和orphans属性是两个属性，使我们可以控制文本行在分页符周围的流动方式。
In this episode we’ll learn about:
在本集中，我们将了解：
Paged media 分页媒体widows and orphans
widows和orphans
When writing CSS, we are normally styling content that is destined for being displayed on a screen.
编写CSS时，通常是在设计要在屏幕上显示的内容的样式。
But there’s a whole range of properties specifically for paged media which describes how a document can be flowed into a series of pages.
但是，有一个专门针对分页媒体的属性，它描述了文档如何流入一系列页面。
It adds functionality for pagination, page margins, page size, orientation, and extends generated content to enable page numbering and page headers and footers.
它增加了分页，页边距，页面大小，方向的功能，并扩展了生成的内容以启用页面编号以及页面页眉和页脚。
The closest thing to working with the CSS Page spec that I’ve come across in real-world web development is creating print stylesheets. We touched on this in “Episode 13: Media Queries”.
我在实际的Web开发中遇到的与CSS Page规范最接近的工作是创建打印样式表。 我们在“第13集：媒体查询”中谈到了这一点。
When dealing with this completely different medium of printed content, there are a couple of CSS properties available that don’t apply to screen media. Let’s have a look at two for controlling the flow of text between pages.
当处理这种完全不同的印刷内容媒体时，有几个CSS属性可用于屏幕媒体。 让我们看一下两种用于控制页面之间文本流的方法。
When a paragraph of text flows across multiple pages or columns, if it doesn’t all fit within one page or column, it will be split into two parts.
当一段文本跨多页或多列流动时，如果它不能完全容纳在一页或一列中，则它将分为两部分。
A widow is the last line of a paragraph that appears on its own at the top of a new page or column. This not considered visually pleasing so the minimum number of lines can be controlled using the widows property.
widow是段落的最后一行，它独自出现在新页面或新列的顶部。 这在视觉上不令人满意，因此可以使用widows属性控制最小行数。
p { column-count: 2; widows: 3; }This will ensure that there are a minimum of 3 lines of text at the start of a new page or, in this case, at the start of a new column.
这将确保在新页面的开始处或在这种情况下在新列的开始处至少有3行文本。
In contrast to widows, an orphans in the world of typography refers to the first line of a paragraph that starts at the bottom of a page and then continues on the next.
与widows相比，版式世界中的orphans是指段落的第一行，该段落的第一行从页面底部开始，然后在下一页继续。
The minimum number of lines that should be left before a page break can be controlled by the CSS orphans property.
分页符应该保留的最少行数可以由CSS orphans属性控制。
This takes a positive integer and only applies to paged media such as in a print stylesheet.
这需要一个正整数，并且仅适用于分页介质，例如打印样式表中的介质。
@media print { p { orphans: 2; } }This snippet will ensure there are at least two lines of paragraph text before the end of the page. “2” is the default value so to increase the number of lines, a higher value of orphans can be set.
此代码段将确保在页面末尾之前至少有两行段落文本。 “ 2”是默认值，因此为了增加行数，可以设置更高的orphans值。
Somewhat confusingly, the term “orphan” has two meanings in typography.
令人困惑的是，“孤儿”一词在印刷术中有两种含义。
It can also be used to refer to a dangling, lone word at the end of a paragraph, whether it comes at a page break or not.
无论是否在分页符处出现，它也可以用来指代段落末尾的悬空单字。
This paragraph has an orphan as the last word. It sits all on its own and doesn’t look great.
本段的最后一个单词是孤儿。 它全部靠自己坐着，看起来不太好。
We could try and force this not to happen by inserting forced line breaks further up the paragraph with a <br> tag.
我们可以尝试通过使用<br>标记在段落中进一步插入强制换行符来强迫这种情况不会发生。
This gets the desired effect, but if we’re working on a responsive project, this forced line break can cause some pretty ugly results when the width of the container changes.
这样可以达到预期的效果，但是如果我们正在做一个响应项目，那么当容器的宽度改变时，这种强制换行可能会导致难看的结果。
I’ll remove the break tags and show a slightly more flexible approach.
我将删除break标签，并显示一种稍微更灵活的方法。
When the text reflows, there are some points when the space between the last two words breaks and we end up with an orphan word. To fix this, a non-breaking space character can be added between the two last words in the paragraph.
当文本重排时，在最后两个单词之间的间隔断开时，有些点会变成一个孤立的单词。 要解决此问题，可以在段落的最后两个词之间添加一个不间断的空格字符。
Now, if there’s plenty of space, everything appears normal, but if space gets too tight, both words, joined by the non-breaking space will bump down to the next line, keeping everything looking neat and tidy.
现在，如果有足够的空间，那么一切看起来都很正常，但是如果空间变得太紧，那么两个单词以及不间断的空格将碰撞到下一行，从而使所有内容看起来都整洁。
翻译自: https://www.sitepoint.com/atoz-css-screencast-widows/
