diff --git a/files/zh-cn/web/css/overflow-x/index.md b/files/zh-cn/web/css/overflow-x/index.md index a606e83cb7528f..a8846bd7499a37 100644 --- a/files/zh-cn/web/css/overflow-x/index.md +++ b/files/zh-cn/web/css/overflow-x/index.md @@ -1,18 +1,20 @@ --- title: overflow-x slug: Web/CSS/overflow-x +l10n: + sourceCommit: f89df1bb60b0d71d3e41bf5b1c0d8cb4eac45a27 --- {{CSSRef}} -[CSS](/zh-CN/docs/Web/CSS) 属性 **`overflow-x`** 设置了当内容溢出块级元素的左右两侧时所显示的内容。可以不显示，或者显示滚动条或溢出内容。 +[CSS](/zh-CN/docs/Web/CSS) 属性 **`overflow-x`** 设置当内容溢出块级元素的左右两侧时所显示的内容。可以不显示，或显示滚动条，或显示溢出内容。也可以使用 [`overflow`](/zh-CN/docs/Web/CSS/overflow) 简写属性来设置该属性。 {{EmbedInteractiveExample("pages/css/overflow-x.html")}} ## 语法 ```css -/* 关键词值 */ +/* 关键字值 */ overflow-x: visible; overflow-x: hidden; overflow-x: clip; @@ -27,18 +29,24 @@ overflow-x: revert-layer; overflow-x: unset; ``` -`overflow-x` 属性可指定为下列关键词之一。 +`overflow-x` 属性可指定为下列 {{CSSXref("overflow_value", "<overflow>")}} 关键字值之一。 + +当 {{cssxref("overflow-y")}} 的值为 `hidden`、`scroll` 或者 `auto`，而 `overflow-x` 属性的值为 `visible`（默认值）时，该值会被隐式地计算为 `auto`。 ### 取值 - `visible` - - : 内容不会被截断，且可以显示在内容盒之外。当 {{cssxref("overflow-y")}} 的值为 `hidden`、`scroll` 或者 `auto`，而本属性的值为 `visible` 时，本属性会被隐式的计算为 `auto`。 + - : 溢出的内容不会被截断，且可以显示在元素边距（padding）框的左右边缘之外。元素盒子不是{{glossary("scroll container", "滚动容器")}}。 - `hidden` - - : 内容会被截断，且不会显示滚动条。 + - : 如有必要，溢出的内容会被截断以从水平方向适应元素的边距框，不会显示滚动条。 +- `clip` + - : 在*溢出截断边缘*（使用 [`overflow-clip-margin`](/zh-CN/docs/Web/CSS/overflow-clip-margin) 属性定义）上的溢出内容会被截断。即，距元素内边距框指定宽度（为 `overflow-clip-margin` 的 {{cssxref("<length>")}} 值，若未设置则为 `0px`）范围内的内容会溢出。`clip` 和 `hidden` 的区别是 `clip` 关键字还禁止所有滚动，包括程序性滚动（programmatic scrolling）。其不会创建新的格式化上下文。如果要创建新的格式化上下文，请将 `overflow: clip` 与 {{cssxref("display", "display: flow-root", "#flow-root")}} 一起使用。元素盒子不是滚动容器。 - `scroll` - - : 桌面浏览器总是显示滚动条，无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。 + - : 如有必要，溢出的内容会被截断以从水平方向适应元素的边距框。无论内容是否发生溢出，浏览器总是显示滚动条。（这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。）而打印机可能会打印溢出的内容。 - `auto` - - : 取决于浏览器本身。当内容发生溢出时，桌面浏览器如 Firefox 会显示滚动条。 + - : 元素边距框中的溢出内容会被截断，且溢出内容可通过滚动以进行浏览。与 `scroll` 关键字值不同的是，用户代理*只在*内容溢出时显示滚动条，默认不会显示滚动条。如果内容可以适应元素的边距框，则看起来与 `visible` 相同，但仍然会创建新的区块格式化上下文。桌面浏览器会在内容溢出时显示滚动条。 + +> **备注：** 关键字值 `overlay` 是 `auto` 的一个遗留别名。使用 `overlay` 时，滚动条会绘制在内容上方，而不占用空间。 ## 形式定义 @@ -46,7 +54,7 @@ overflow-x: unset; ## 形式语法 -{{CSSSyntax}} +{{csssyntax}} ## 示例 @@ -65,7 +73,7 @@ overflow-x: unset;
  • - overflow-x:visible——按需在盒外显示文本 + overflow-x:visible——必要时在盒外显示文本
    ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    • @@ -116,4 +124,6 @@ overflow-x: unset; ## 参见 -- 相关 CSS 属性：{{CSSXref("text-overflow")}}、{{CSSXref("white-space")}}、{{CSSXref("overflow")}}、{{CSSXref("overflow-y")}}、{{CSSXref("clip")}}、{{CSSXref("display")}} +- {{Cssxref("clip")}}、{{Cssxref("display")}}、{{cssxref("text-overflow")}}、{{cssxref("white-space")}} +- [CSS 溢出](/zh-CN/docs/Web/CSS/CSS_overflow)模块 +- [CSS 构建：溢出的内容](/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content) diff --git a/files/zh-cn/web/css/overflow-y/index.md b/files/zh-cn/web/css/overflow-y/index.md index 19d742409689c5..1f57275fbf3a8c 100644 --- a/files/zh-cn/web/css/overflow-y/index.md +++ b/files/zh-cn/web/css/overflow-y/index.md @@ -1,18 +1,20 @@ --- title: overflow-y slug: Web/CSS/overflow-y +l10n: + sourceCommit: f89df1bb60b0d71d3e41bf5b1c0d8cb4eac45a27 --- {{CSSRef}} -[CSS](/zh-CN/docs/Web/CSS) 属性 **`overflow-y`** 设置了当内容溢出块级元素的上下两侧时所显示的内容。可以不显示，或者显示滚动条或溢出内容。 +[CSS](/zh-CN/docs/Web/CSS) 属性 **`overflow-y`** 设置当内容溢出块级元素的上下两侧时所显示的内容。可以不显示，或显示滚动条，或显示溢出内容。也可以使用 [`overflow`](/zh-CN/docs/Web/CSS/overflow) 简写属性来设置该属性。 {{EmbedInteractiveExample("pages/css/overflow-y.html")}} ## 语法 ```css -/* 关键词值 */ +/* 关键字值 */ overflow-y: visible; overflow-y: hidden; overflow-y: clip; @@ -27,30 +29,32 @@ overflow-y: revert-layer; overflow-y: unset; ``` -`overflow-y` 属性可指定为下列关键词之一。 +`overflow-y` 属性可指定为下列 {{CSSXref("overflow_value", "<overflow>")}} 关键字值之一。 -当 {{cssxref("overflow-x")}} 值为 `hidden`、`scroll` 或者 `auto`，而本属性的值为 `visible`（默认值）时，本属性会被隐式的计算为 `auto`。 +当 {{cssxref("overflow-x")}} 的值为 `hidden`、`scroll` 或者 `auto`，而 `overflow-y` 属性的值为 `visible`（默认值）时，该值会被隐式地计算为 `auto`。 ### 取值 - `visible` - - : 内容不会被截断，且可以显示在内容盒之外。 + - : 溢出的内容不会被截断，且可以显示在元素边距（padding）框的上下边缘之外。元素盒子不是{{glossary("scroll container", "滚动容器")}}。 - `hidden` - - : 内容会被截断，且不会显示滚动条。 -- `clip` {{experimental_inline}} - - : 像 `hidden` 一样，内容被剪切到元素的填充框中。 `clip` 和 `hidden` 的区别是 `clip` 还禁止所有滚动，包括程序性滚动（programmatic scrolling）。包含框不再是滚动容器，并且不会启动新的格式设置上下文。如果要启动新的格式设置上下文，可以使用 {{cssxref("display", "display: flow-root", "#flow-root")}} 。 + - : 如有必要，溢出的内容会被截断以从垂直方向适应元素的边距框，不会显示滚动条。 +- `clip` + - : 在*溢出截断边缘*（使用 [`overflow-clip-margin`](/zh-CN/docs/Web/CSS/overflow-clip-margin) 属性定义）上的溢出内容会被截断。即，距元素内边距框指定宽度（为 `overflow-clip-margin` 的 {{cssxref("<length>")}} 值，若未设置则为 `0px`）范围内的内容会溢出。`clip` 和 `hidden` 的区别是 `clip` 关键字还禁止所有滚动，包括程序性滚动（programmatic scrolling）。其不会创建新的格式化上下文。如果要创建新的格式化上下文，请将 `overflow: clip` 与 {{cssxref("display", "display: flow-root", "#flow-root")}} 一起使用。元素盒子不是滚动容器。 - `scroll` - - : 桌面浏览器总是显示滚动条，无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。 + - : 如有必要，溢出的内容会被截断以从垂直方向适应元素的边距框。无论内容是否发生溢出，浏览器总是显示滚动条。（这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。）而打印机可能会打印溢出的内容。 - `auto` - - : 取决于浏览器本身。当内容发生溢出时，桌面浏览器如 Firefox 会显示滚动条。 + - : 元素边距框中的溢出内容会被截断，且溢出内容可通过滚动以进行浏览。与 `scroll` 关键字值不同的是，用户代理*只在*内容溢出时显示滚动条，默认不会显示滚动条。如果内容可以适应元素的边距框，则看起来与 `visible` 相同，但仍然会创建新的格式化上下文。 + +> **备注：** 关键字值 `overlay` 是 `auto` 的一个遗留别名。使用 `overlay` 时，滚动条会绘制在内容上方，而不占用空间。 ## 形式定义 -{{CSSInfo}} +{{cssinfo}} ## 形式语法 -{{CSSSyntax}} +{{csssyntax}} ## 示例 @@ -61,29 +65,28 @@ overflow-y: unset; ```html