CSS 布局 - 控制元素内容溢出
CSS overflow 属性定义由于内容太大而无法放入一个规定大小区域的时候该做什么,是隐藏多余内容,还是增加滚动条。
CSS overflow
属性定义由于内容太大而无法放入一个规定大小区域的时候该做什么,是隐藏多余内容,还是增加滚动条。
overflow
属性的可选值:
visible
- 默认。多余的内容呈现在元素框外hidden
- 多余的内容被隐藏起来scroll
- 通过滚动条以查看多余内容auto
- 与 类似scroll
,但仅在必要时添加滚动条
! 注意: overflow
属性仅适用于具有指定高度的块元素。
overflow: visible
visible
是默认选项,超出的内容不会隐藏,而是直接显示在元素的框外。
显示溢出的内容:
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
overflow: hidden
hidden
将多余的内容隐藏。
div {
overflow: hidden;
}
overflow: scroll
scroll
会为多余的内容添加滚动条。此属性会导致不管有没有溢出的内容,都会显示滚动条(Mac 系统的滚动条时自动显示的)。
div {
overflow: scroll;
}
overflow: auto
auto
会为多余的内容添加滚动条,但仅在必要时添加滚动条。
div {
overflow: auto;
}
overflow-x
和 overflow-y
overflow-x
只控制水平方向的溢出内容overflow-y
只控制垂直方向的溢出内容
div {
overflow-x: hidden; /* 隐藏水平溢出的内容 */
overflow-y: scroll; /* 显示垂直滚动条 */
}
所有 CSS 溢出属性
属性 | 说明 |
---|---|
overflow |
设置对溢出内容的处理方式 |
overflow-x |
设置对水平方向溢出内容的处理方式 |
overflow-y |
设置对垂直方向溢出内容的处理方式 |