CSS-盒子模型元素溢出

7_35Durant2024-05-09 12:29

作用：控制溢出的元素的内容的显示方式

属性：overflow

属性值

属性值效果

hidden 溢出隐藏

scroll 溢出滚动（无论是否溢出，都显示滚动条位置）

auto 溢出滚动（溢出才显示滚动条位置）

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

     div{
       width:100px;
       height: 100px;
       background-color: red;
     }
   
     
    </style>
</head>
<body>
<div>hello world hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world</div>

</body>
</html>

正常情况下，网页是这个样子的，当文本超出了行高之后

使用了属性overflow之后，溢出的部分都被隐藏住了