From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/overflow-y/index.html | 202 ++++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 files/zh-cn/web/css/overflow-y/index.html (limited to 'files/zh-cn/web/css/overflow-y') diff --git a/files/zh-cn/web/css/overflow-y/index.html b/files/zh-cn/web/css/overflow-y/index.html new file mode 100644 index 0000000000..0665e1a0ce --- /dev/null +++ b/files/zh-cn/web/css/overflow-y/index.html @@ -0,0 +1,202 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - 元素单一方向溢出 +translation_of: Web/CSS/overflow-y +--- +
{{CSSRef}}
+ +

概述

+ +

当一个块级元素（div元素、p元素之类的）的内容在垂直方向发生溢出时，

+ +

CSS属性overflow-y 决定如何处理溢出的内容。

+ +

隐藏溢出内容（hidden），或者显示滚动条（scroll），或者直接显示溢出内容（visible），或者让浏览器来处理（auto）。

+ +
{{cssinfo}}
+ +

Syntax[语法]

+ +
/* 在当前css选择器元素下, 元素内容在垂直方向上溢出时 */
+
+/* overflow-y 属性 可选值 */
+
+overflow-y: visible; /*内容可见*/
+overflow-y: hidden; /*内容隐藏*/
+overflow-y: scroll; /*总是显示滚动条*/
+overflow-y: auto; /*浏览器决定*/
+
+
+/* overflow-y 属性 全局可选值 */
+
+overflow-y: inherit; /*继承*/
+overflow-y: initial; /*默认值*/
+overflow-y: unset; /*未设置*/
+
+ +

Values[可选值]

+ +
+
visible
+
内容不会被截断，且可以显示在内容盒之外。
+
hidden
+
内容会被截断，且不会显示滚动条。
+
+ +
+
clip {{experimental_inline}}
+
像 hidden 一样，内容被剪切到元素的填充框中。 clip 和 hidden 的区别是 clip 还禁止所有滚动，包括程序性滚动（programmatic scrolling）。包含框不再是滚动容器，并且不会启动新的格式设置上下文。 如果要启动新的格式设置上下文，可以使用 {{cssxref("display", "display: flow-root", "#flow-root")}} 。
+
+ +
+
scroll
+
桌面浏览器总是显示滚动条，无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。
+
auto
+
取决于浏览器本身。当内容发生溢出时，桌面浏览器如Firefox会显示滚动条。
+
+

Formal syntax[正式语法]

+ + 
{{csssyntax("overflow-y")}}
+
+
+
+ +

Example[示例]

+ +

HTML

+ +
<ul>
+  <li><code>overflow-y:scroll</code> — 总是显示滚动条
+  <div id="div1">
+   歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
+  </div>
+  </li>
+
+  <li><code>overflow-y:hidden</code> — 在盒子外隐藏溢出的内容
+  <div id="div2">
+  歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
+  </div>
+  </li>
+
+  <li><code>overflow-y:visible</code> — 在盒子外显示溢出的内容
+  <div id="div3">
+    歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
+    </div>
+  </li>
+
+  <li><code>overflow-y:auto</code> — 在大多数浏览器中, <code>auto</code> 效果等于 <code>scroll</code>
+  <div id="div4">
+    歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
+    </div>
+  </li>
+
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black; /*元素边框 1px宽 黑边*/
+  width:  280px;
+  height: 120px;
+}
+
+
+#div1 { overflow-y: scroll; margin-bottom: 12px; }
+
+#div2 { overflow-y: hidden; margin-bottom: 12px;  }
+
+#div3 { overflow-y: visible; margin-bottom: 150px;  }
+
+#div4 { overflow-y: auto; margin-bottom: 12px;  }
+
+
+ +

结果

+ +
{{EmbedLiveSample("Example", "100%", "760")}}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Box', '#overflow-y', 'overflow-y')}}{{Spec2('CSS3 Box')}}
+ +

浏览器支持

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支持1.0{{CompatGeckoDesktop("1.5")}}5.0 [*]9.53.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[*] IE8 引入了属性-ms-overflow-y，作用与overflow-y相同。不要使用前缀-ms-。

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf