AtoZ CSS 截屏视频：寡妇和孤儿
如今，CSS 越来越多地被用来控制网站以外的事物的样式。 CSS 可以应用样式的一种媒体类型是分页媒体，例如数字杂志和电子书或印刷样式表形式的网站。 有些属性仅适用于该媒体类型。和属性是widows两个orphans允许我们控制文本行如何围绕分页符流动的属性。 在本集中我们将了解： 分页媒体 widows和orphans 分页媒体 在编写 CSS 时，我们通常会设计要在屏幕上显示的内容的样式。 但是，有一系列专门针对分页媒体的属性，它们描述了文档如何流入一系列页面。 它添加了分页、页边距、页面大小、方向的功能，并扩展了生成的内容以启用页面编号以及页眉和页脚。 我在现实 Web 开发中遇到的与使用 CSS 页面规范最接近的事情是创建打印样式表。我们在“第 13 集：媒体查询”中谈到了这一点。Learn to Code with JavaScript 在处理这种完全不同的印刷内容媒体时，有一些可用的 CSS 属性不适用于屏幕媒体。让我们看一下两个用于控制页面之间文本流的方法。 widows 当一段文本跨多个页面或列时，如果它不能全部 中国海外亚洲号码数据 容纳在一个页面或列中，它将被分成两部分。 Awidow是段落的最后一行，它单独出现在新页面或新列的顶部。这在视觉上并不令人愉悦，因此可以使用该属性来控制最小行数widows。 这将确保新页面的开头或在本例中新列的开头至少有 3 行文本。 orphans 与 相比widows，排版中的 anorphans指的是段落的第一行，从页面底部开始，然后继续下一页。 分页符之前应保留的最少行数可以由 CSSorphans属性控制。 这采用正整数，并且仅适用于分页媒体，例如打印样式表中的媒体。
https://manchestermassage.net/wp-content/uploads/2024/02/photo_2024-02-14_09-44-29-6.jpg
此代码片段将确保页面末尾之前至少有两行段落文本。 “2”是默认值，因此要增加行数，orphans可以设置更高的值。 孤独的话语 有点令人困惑的是，“孤儿”一词在排版中有两种含义。 它还可以用来指段落末尾悬而未决的、单独的单词，无论它是否出现在分页符处。 这一段有一个孤儿作为最后一个词。它独立存在，看起来不太好。 我们可以尝试通过使用标签在段落上方插入强制换行符来强制避免这种情况发生<br>。 这得到了预期的效果，但如果我们正在开发一个响应式项目，当容器的宽度发微更灵活的方法。 Learn to Code with JavaScript 当文本重排时，在某些时候最后两个单词之间的空格会中断，我们最终会得到一个孤立单词。
页:
[1]