码农教程 - 一技在手,衣食无忧! tools

目录

CSS 布局 - 溢出

❮ 上一节 下一节 ❯

CSSoverflow属性控制对太大而无法放入区域的内容的处理方式。

这段文字非常长，其容器的高度只有 100 像素。因此，添加了滚动条来帮助读者滚动内容。 Lorem ipsum dolor sat amet，conectetuer adipiscing elit，sed diam nonummy nibh euismod Tincidunt ut laoreet dolore magna aliquamerat volutpat。 Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum。 Typi non habent claritatem insitam；这是在iis qui facit eorum claritatem中使用的传说。

亲自试一试 »

CSS 溢出

这个overflow属性指定当元素的内容太大而无法容纳指定区域时是否剪切内容或添加滚动条。

这个overflow属性具有以下值：

  • visible- 默认。溢出不会被剪裁。内容呈现在元素框之外
  • hidden- 溢出部分被剪掉，其余内容将不可见
  • scroll- 溢出部分被剪掉，并添加滚动条以查看其余内容
  • auto- 如同scroll，但仅在必要时添加滚动条

笔记：这个overflow属性仅适用于具有指定高度的块元素。

笔记：在 OS X Lion（Mac 上）中，滚动条默认隐藏，仅在使用时显示（即使设置了 "overflow:scroll"）。

溢出：可见

默认情况下，溢出是visible，这意味着它不会被剪裁并且会在元素框之外呈现：

当您想更好地控制布局时，可以使用溢出属性。溢出属性指定内容溢出元素框时会发生什么。

示例

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}
亲自试一试 »

溢出：隐藏

随着hidden值，溢出被剪掉，其余内容被隐藏：

示例

div {
  overflow: hidden;
}
亲自试一试 »

溢出：滚动

将值设置为scroll，溢出被剪掉并添加滚动条以在框内滚动。请注意，这将添加水平和垂直滚动条（即使您不需要它）：

当您想更好地控制布局时，可以使用溢出属性。溢出属性指定内容溢出元素框时会发生什么。

示例

div {
  overflow: scroll;
}
亲自试一试 »

溢出：自动

这个auto值类似于scroll，但它仅在必要时添加滚动条：

当您想更好地控制布局时，可以使用溢出属性。溢出属性指定内容溢出元素框时会发生什么。

示例

div {
  overflow: auto;
}
亲自试一试 »

溢出-x 和溢出-y

这个overflow-x和overflow-y属性指定是否仅水平或垂直（或两者）更改内容的溢出：

overflow-x指定如何处理内容的左/右边缘。
overflow-y指定如何处理内容的顶部/底部边缘。

当您想更好地控制布局时，可以使用溢出属性。溢出属性指定内容溢出元素框时会发生什么。

示例

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}
亲自试一试 »

通过练习测试一下

练习:

使用 class="intro" 强制滚动条到 <div> 元素。

<style>
.intro {
  width: 200px;
  height: 70px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor.
</div>

</body>

开始练习

所有 CSS 溢出属性

Property Description
overflow Specifies what happens if content overflows an element's box
overflow-wrap Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area


❮ 上一节 下一节 ❯