css3的overflow属性

Flee23

已于 2023-07-20 10:51:09 修改

阅读量1.3k

点赞数

文章标签： css3 css 前端

于 2020-06-05 20:32:32 首次发布

本文链接：https://blog.csdn.net/destiny1234544/article/details/106577113

版权

当我们使用css3在样式中设置了宽度和高度时，就有可能出现溢出的情况，这时就可以使用overflo属性来指定如何显示盒子内显示不下的内容。

溢出：

比如当我们自定义一个5050大小的界面，然而他的内容却不止这么点，就会出现溢出的情况，下面就是定义5050界面的代码
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow属性</title>
    <style>
        div{
            width: 50px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<h1>overflow溢出</h1>
<div>overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出</div>
</body>
</html>

但是在他的div内容中有很多的overflo溢出文字，50*50的界面无法全部显示就会出现下面这种情况：
在这里插入图片描述
所以我们需要一个属性来解决这个问题，于是便有了overflow属性。

overflow属性

overflow属性又4个属性值：hidden（超出范围内的文字将被隐藏起来）、scroll（在div中出现水平和垂直的滚动条，超出的内容被滚动显示）、auto（当文字超出div的容纳范围时，根据需要出现水平的滚动条或时垂直的滚动条，滚动显示超出的内容）、visible（和不显示overflow时候显示效果一样，超出范围的文字按原样显示）。
1.hidden：
当我们在样式中添加overflow：hidden，他会将超出部分隐藏起来，但是这一部分文字还是实际存在的，隐藏后的效果如下：
在这里插入图片描述
2.scroll：
当在样式中添加overflow：scroll属性时他会出现一个滚动条，可以通过鼠标点击浏览超出部分的内容，具体效果如下：

3.auto：
当我们在样式中添加overflow：auto属性时，也会出现类似如下图的滚动条。

在这里插入图片描述
4.visible：
当我们在样式中添加overflow：visible属性时超出范围的文字将按原来的样式显示，就会有下图的效果：

overflow-x和overflow-y属性

除了上述几个方法，我们还可以通过overflow-x和overflow-y属性来单独指定水平或垂直方向上如果内容超出盒容纳范围时的显示方法。
例如我们设置overflow-x为hidden，overflow-y属性为scroll，那么超出之后只会在垂直方向上显示滚动条。

text-overflow属性

通过使用text-overflow属性可以在盒的末尾显示一个代表省略的符号“…”,但是
text-overflow属性只在盒中的内容在水平方向上超出盒的容纳范围有效。首先我们要将white-space设置为nowrap，使得盒的右端内容不能换行显示，这样就达到了水平方向溢出的效果，即下图：
在这里插入图片描述
然后使用overflow：hidden属性将溢出部分隐藏，再将text-overflow设置为ellipsis，就可以达到省略号的效果，实现代码和效果图如下：
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow属性</title>
    <style>
        /*div{*/
        /*    width:150px;*/
        /*    height:150px;*/
        /*    background-color: green;*/
        /*    overflow:visible;*/
        /*}*/
        div{
            overflow: hidden;
            text-overflow: ellipsis;
            text-overflow: ;
            white-space: nowrap;
            width: 300px;
            border:solid 1px green;
        }
    </style>
</head>
<body>
<h1>overflow溢出</h1>
<div>overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出overflow溢出</div>
</body>
</html>

在这里插入图片描述
以上就是所有的overflow属性

Flee23

关注

0
点赞
踩
1

收藏

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

当我们使用css3在样式中设置了宽度和高度时，就有可能出现溢出的情况，这时就可以使用overflo属性来指定如何显示盒子内显示不下的内容。溢出：比如当我们自定义一个5050大小的界面，然而他的内容却不止这么点，就会出现溢出的情况，下面就是定义5050界面的代码下面展示一些内联代码片。// A code blockvar foo = 'bar';// An highlighted blockvar foo = 'bar';<!DOCTYPE html><html lan
复制链接

扫一扫