overflow属性

最新推荐文章于 2024-05-04 04:33:35 发布

SSLUKA

最新推荐文章于 2024-05-04 04:33:35 发布

阅读量1.1k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/SSLUKA/article/details/106556495

版权

overflow属性

1.概念
用来指定对盒中容纳不下的内容的显示办法
2.取值

属性名	作用
hidden	超出容纳范围的文字被隐藏起来
scroll	在div元素中出现水平与垂直的滚动条，超出的内容被滚动显示
auto	在文字超出div元素的容纳范围时，根据需要出现水平滚动条或者是垂直滚动条，滚动显示超出的内容
visible	和不使用overflow时候的显示效果一样，超出容纳范围的文字按原样显示

3.例子
例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow溢出</title>
    <style>
        div{
            background: blue;
            width:50px;
            height:50px;
			overflow: hidden;
        }
    </style>
</head>
<body>
<h1>overflow溢出</h1>
<div>overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出</div>
</body>
</html>

在这里插入图片描述
例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow溢出</title>
    <style>
        div.o3{
            background: rebeccapurple;
            width:100px;
            height:100px;
            overflow: scroll;
        }
        div.o4{
            background:red;
            width:100px;
            height:100px;
            overflow: auto;
        }
        div.o5{
            background: yellow;
            width:100px;
            height:100px;
            overflow: visible;
        }
    </style>
</head>
<body>
<h1>overflow溢出</h1>
<div class="o3">overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出</div>
<div class="o4">overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出</div>
<div class="o5">overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出</div>
</body>
</html>

在这里插入图片描述

overflow-x属性和overflow-y属性

1.使用overflow-x属性或者overflow-y属性，可以单独指定可以在水平或者垂直方向上如果内容超出盒的容纳范围时的显示方法
2.例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow溢出</title>
    <style>
        div{
            background: rebeccapurple;
            width:150px;
            height:150px;
            overflow-x: hidden;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<h1>overflow溢出</h1>
<div>overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出</div>
</body>
</html>

在这里插入图片描述

text-overflow属性

1.通过使用text-overflow属性，可以在盒的末尾显示一个代表省略号的符号"…"，但是text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效。
tip：水平溢出效果可以通过white-space属性的属性值设定为nowrap来实现，使得盒的右端内容不能换行显示
2.对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow溢出</title>
    <style>
        div{
            white-space: nowrap;
            border:solid 1px green;
            width:300px;
        }
    </style>
</head>
<body>
<h1>overflow溢出</h1>
<div>overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow溢出</title>
    <style>
        div{
            overflow:hidden;
            text-overflow:ellipsis ;
            white-space: nowrap;
            border:solid 1px green;
            width:300px;
        }
    </style>
</head>
<body>
<h1>overflow溢出</h1>
<div>overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出</div>
</body>
</html>

在这里插入图片描述

SSLUKA

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
overflow属性

overflow属性1.概念用来指定对盒中容纳不下的内容的显示办法2.取值属性名作用hidden超出容纳范围的文字被隐藏起来scroll在div元素中出现水平与垂直的滚动条，超出的内容被滚动显示auto在文字超出div元素的容纳范围时，根据需要出现水平滚动条或者是垂直滚动条，滚动显示超出的内容visible和不使用overflow时候的显示效果一样，超出容纳范围的文字按原样显示3.例子例1：<!DOCTYPE html><h
复制链接

扫一扫