CSS overflow
2018-12-12 本文已影响10人
roy_pub
overflow
| 参数 | 说明 |
|---|---|
| visible | 不剪切，不添加滚动条 |
| auto | 超出显示滚动条，不超出不显示滚动条 |
| hidden | 不显示超过尺寸的内容，溢出隐藏 |
| scroll | 总是显示滚动条 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid orange;
}
</style>
</head>
<body>
<div>
Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid orange;
overflow: hidden;
}
</style>
</head>
<body>
<div>
Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid orange;
overflow: scroll;
}
</style>
</head>
<body>
<div>
Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World
</div>
</body>
</html>
溢出部分显示省略号
首先强制一行内显示，再和overflow属性搭配使用。
-
white-space
normal 默认显示方式
nowrap 强制在同一行内显示所有文本，知道结束文本或者遇到br标签才换行 -
text-overflow
clip 不显示省略标记，简单裁切
ellipsis 显示省略标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid orange;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World World Hello World Hello World
</div>
</body>
</html>
