HTML | DOM Style widows 属性

widows 属性用于控制在文本中的末尾放置多少个行（不完整的行）。

语法

<style>
    selector {
        widows: value;
    }
</style>

• selector：选择器，指定要应用样式的元素。
• value：指定 widows 属性的值，可以是一个数字（表示行数）或 inherit（继承父元素的值）。

值

• 数字：表示将保留的末尾行数。默认值是 2。
• inherit：表示继承父元素的 widows 属性值。

示例

<style>
    p {
        widows: 4;
    }
</style>

<p>This is a long paragraph that should not have widows.</p>

输出结果

该示例将使 <p> 元素的末尾至少保留 4 行，以避免出现单个词或单行被放置在下一页。

注意事项

• widows 属性仅适用于块级元素。
• 根据浏览器的不同，此属性可能会被忽略。
• 请注意，在某些浏览器中，widows 属性可能不起作用，或者需要与其他属性（如 page-break-inside）一起使用才能实现预期效果。

结论

通过使用 widows 属性，您可以控制浏览器如何处理文本块的末尾行数，以避免出现不完整的行。

Markdown代码片段:

# HTML | DOM Style widows 属性

`widows` 属性用于控制在文本中的末尾放置多少个行（不完整的行）。

## 语法

```html
<style>
    selector {
        widows: value;
    }
</style>

• selector：选择器，指定要应用样式的元素。
• value：指定 widows 属性的值，可以是一个数字（表示行数）或 inherit（继承父元素的值）。

值

• 数字：表示将保留的末尾行数。默认值是 2。
• inherit：表示继承父元素的 widows 属性值。

示例

<style>
    p {
        widows: 4;
    }
</style>

<p>This is a long paragraph that should not have widows.</p>

输出结果

该示例将使 <p> 元素的末尾至少保留 4 行，以避免出现单个词或单行被放置在下一页。

注意事项

• widows 属性仅适用于块级元素。
• 根据浏览器的不同，此属性可能会被忽略。
• 请注意，在某些浏览器中，widows 属性可能不起作用，或者需要与其他属性（如 page-break-inside）一起使用才能实现预期效果。

结论

通过使用 widows 属性，您可以控制浏览器如何处理文本块的末尾行数，以避免出现不完整的行。