CSS布局-Overflow

tech2025-12-18  9

CSS Overflow

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 100px; overflow: scroll; border: 1px solid #ccc; } </style> </head> <body> <div id="overflowTest"> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> <p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p> </div> </body> </html>

效果图如下图所示:

CSS Overflow属性值

overflow属性有以下值:

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

 

最新回复(0)