CSS 溢出控制

CSS 溢出控制

CSS 可以通过元素的overflow属性控制超出区域无法容纳的内容的显示方式。

CSS Overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性值：

visible 默认。溢出没有被剪裁。内容在元素框外渲染 hidden 溢出被剪裁，其余内容将不可见 scroll 溢出被剪裁，同时添加滚动条以查看其余内容 auto 与 scroll 类似，但仅在必要时添加滚动条

注释：overflow 属性仅适用于具有指定高度的块元素。

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 overflow:scroll ）。

overflow: visible

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

这是一个示例！你会看到div中的属性overflow设置后，显示内容具体是什么效果。你可以通过下面的试一试按钮尽心个尝试。

div {

 width: 200px;

 height: 50px;

 background-color: #eee;

 overflow: visible;

试一试

overflow: hidden

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

这是一个示例！你会看到div中的属性overflow设置后，显示内容具体是什么效果。你可以通过下面的试一试按钮尽心个尝试。

div {

 overflow: hidden;

试一试

overflow: scroll

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

这是一个示例！你会看到div中的属性overflow设置后，显示内容具体是什么效果。你可以通过下面的试一试按钮尽心个尝试。

div {

 overflow: scroll;

试一试

overflow: auto

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

这是一个示例！你会看到div中的属性overflow设置后，显示内容具体是什么效果。你可以通过下面的试一试按钮尽心个尝试。

div {

 overflow: auto;

试一试

overflow-x 和 overflow-y

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

overflow-x 指定如何处理内容的左/右边缘。 overflow-y 指定如何处理内容的上/下边缘。
这是一个示例！你会看到div中的属性overflow设置后，显示内容具体是什么效果。你可以通过下面的试一试按钮尽心个尝试。

div {

 overflow-x: hidden; /* 隐藏水平滚动栏 */

 overflow-y: scroll; /* 添加垂直滚动栏 */

试一试

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/59540.html

php