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