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>