Skip to content

Commit

Permalink
zh-cn: update the translation of "overflow-x/y" (#16602)
Browse files Browse the repository at this point in the history
Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
  • Loading branch information
yin1999 and jasonren0403 authored Oct 18, 2023
1 parent 1ccd5d8 commit 294cad7
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 34 deletions.
30 changes: 20 additions & 10 deletions files/zh-cn/web/css/overflow-x/index.md
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -27,26 +29,32 @@ overflow-x: revert-layer;
overflow-x: unset;
```

`overflow-x` 属性可指定为下列关键词之一。
`overflow-x` 属性可指定为下列 {{CSSXref("overflow_value", "&lt;overflow&gt;")}} 关键字值之一。

当 {{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("&lt;length&gt;")}} 值,若未设置则为 `0px`)范围内的内容会溢出。`clip` 和 `hidden` 的区别是 `clip` 关键字还禁止所有滚动,包括程序性滚动(programmatic scrolling)。其不会创建新的格式化上下文。如果要创建新的格式化上下文,请将 `overflow: clip` 与 {{cssxref("display", "display: flow-root", "#flow-root")}} 一起使用。元素盒子不是滚动容器。
- `scroll`
- : 桌面浏览器总是显示滚动条,无论内容是否发生溢出这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。
- : 如有必要,溢出的内容会被截断以从水平方向适应元素的边距框。无论内容是否发生溢出,浏览器总是显示滚动条。(这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。
- `auto`
- : 取决于浏览器本身。当内容发生溢出时,桌面浏览器如 Firefox 会显示滚动条。
- : 元素边距框中的溢出内容会被截断,且溢出内容可通过滚动以进行浏览。与 `scroll` 关键字值不同的是,用户代理*只在*内容溢出时显示滚动条,默认不会显示滚动条。如果内容可以适应元素的边距框,则看起来与 `visible` 相同,但仍然会创建新的区块格式化上下文。桌面浏览器会在内容溢出时显示滚动条。

> **备注:** 关键字值 `overlay` 是 `auto` 的一个遗留别名。使用 `overlay` 时,滚动条会绘制在内容上方,而不占用空间。

## 形式定义

{{CSSInfo}}

## 形式语法

{{CSSSyntax}}
{{csssyntax}}

## 示例

Expand All @@ -65,7 +73,7 @@ overflow-x: unset;
</li>

<li>
<code>overflow-x:visible</code>——按需在盒外显示文本
<code>overflow-x:visible</code>——必要时在盒外显示文本
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>

Expand Down Expand Up @@ -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)
50 changes: 26 additions & 24 deletions files/zh-cn/web/css/overflow-y/index.md
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -27,30 +29,32 @@ overflow-y: revert-layer;
overflow-y: unset;
```

`overflow-y` 属性可指定为下列关键词之一
`overflow-y` 属性可指定为下列 {{CSSXref("overflow_value", "&lt;overflow&gt;")}} 关键字值之一

当 {{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("&lt;length&gt;")}} 值,若未设置则为 `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}}

## 示例

Expand All @@ -61,29 +65,28 @@ overflow-y: unset;
```html
<ul>
<li>
<code>overflow-y:hidden</code> — 在盒子外隐藏溢出的内容
<code>overflow-y:hidden</code>——在盒外隐藏文本
<div id="div1">
歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
</div>
</li>

<li>
<code>overflow-y:scroll</code> — 总是显示滚动条
<code>overflow-y:scroll</code>——总是添加滚动条
<div id="div2">
歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
</div>
</li>

<li>
<code>overflow-y:visible</code> — 在盒子外显示溢出的内容
<code>overflow-y:visible</code>——必要时在盒外显示文本
<div id="div3">
歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
</div>
</li>

<li>
<code>overflow-y:auto</code> — 在大多数浏览器中,<code>auto</code> 效果等于
<code>scroll</code>
<code>overflow-y:auto</code>——在多数浏览器上等价于 <code>scroll</code>
<div id="div4">
歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
</div>
Expand All @@ -94,12 +97,9 @@ overflow-y: unset;
#### CSS

```css
#div1,
#div2,
#div3,
#div4 {
div {
border: 1px solid black;
width: 250px;
width: 350px;
height: 100px;
}

Expand All @@ -113,7 +113,7 @@ overflow-y: unset;
}
#div3 {
overflow-y: visible;
margin-bottom: 120px;
margin-bottom: 150px;
}
#div4 {
overflow-y: auto;
Expand All @@ -135,4 +135,6 @@ overflow-y: unset;

## 参见

- 相关 CSS 属性:{{CSSXref("text-overflow")}}、{{CSSXref("white-space")}}、{{CSSXref("overflow")}}、{{CSSXref("overflow-x")}}、{{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)

0 comments on commit 294cad7

Please sign in to comment.