21. CSS 布局 – Overflow

目录
文章目录隐藏
  1. CSS Overflow
  2. overflow: visible
  3. overflow: hidden
  4. overflow: scroll
  5. overflow: auto
  6. verflow-x 和 overflow-y
  7. 所有 CSS Overflow 属性

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow 属性有以下值:

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

overflow: visible

默认情况下,溢出是可见的(visible),这意味着它不会被裁剪,而是在元素框外渲染:

div {
    background-color: #eee;
    width: 220px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
</style>

<body>
<div id="overflowTest">
    <p>这里的文本内容会溢出元素框。</p>
    <p>这里的文本内容会溢出元素框。</p>
    <p>这里的文本内容会溢出元素框。</p>
</div>
</body>

效果如下:

overflow: visible

overflow: hidden

如果使用 hidden 值,溢出会被裁剪,其余内容被隐藏:

<style>
div {
    background-color: #eee;
    width: 220px;
    height: 50px;
    border: 1px dotted black;
    overflow: hidden;
}
</style>

效果如下:

overflow: hidden

overflow: scroll

如果将值设置为 scroll,溢出将被裁剪,并添加滚动条以便在框内滚动。请注意,这将在水平和垂直方向上添加一个滚动条(即使您不需要它):

<style>
div {
    background-color: #eee;
    width: 220px;
    height: 150px;
    border: 1px dotted black;
    overflow: scroll;
}
</style>

效果如下:

overflow: scroll

overflow: auto

auto 值类似于 scroll,但是它仅在必要时添加滚动条:

div {
  overflow: auto;
}

verflow-x 和 overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地(或同时)更改内容的溢出:

  • overflow-x 指定如何处理内容的左/右边缘。
  • overflow-y 指定如何处理内容的上/下边缘。
div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

所有 CSS Overflow 属性

属性 描述
overflow 规定如果内容溢出元素框会发生什么情况。
overflow-x 规定在元素的内容区域溢出时如何处理内容的左/右边缘。
overflow-y 指定在元素的内容区域溢出时如何处理内容的上/下边缘。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 21. CSS 布局 – Overflow

发表回复