overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.ex1{
background:lightblue;
width:100px;
height:50px;
overflow:scroll;
}
div.ex2{
background:lightblue;
width:100px;
height:50px;
overflow:hidden;
}
div.ex3{
background:lightblue;
width:100px;
height:50px;
overflow:auto;
}
div.ex4{
background:lightblue;
width:100px;
height:50px;
overflow:visible;
}
</style>
</head>
<body>
<h2>overflow: scroll:显示滚动条</h2>
<div class='ex1'>
小黑就是喜欢你,一起跑起来
</div>
<h2>overflow: hidden 超出区域则隐藏</h2>
<div class='ex2'>
小黑就是喜欢你,一起跑起来
</div>
<h2>overflow: auto 超出区域则显示进度条</h2>
<div class='ex3'>
小黑就是喜欢你,一起跑起来
</div>
<h2>overflow: visib 超出区域不会被修剪(默认)</h2>
<div class='ex4'>
小黑就是喜欢你,一起跑起来
</div>
</body>
</html>
text-overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.test{
white-space:nowrap; /* 文本不会换行,在这一行继续 */
width:12em;
overflow:hidden;
border:1px solid #000000
}
</style>
</head>
<body>
<p> 使用text-overflow:ellipsis(显示省略符号 ... 来代表被修剪的文本) </p>
<div class='test' style='text-overflow:ellipsis'>
小黑就是非常喜欢你,爱吃驴,好好学习好好跑步坚决不躺平!!!!!
</div>
<p> 使用text-overflow:clip(剪切文本) </p>
<div class='test' style='text-overflow:clip'>
小黑就是非常喜欢你,爱吃驴,好好学习好好跑步坚决不躺平!!!!!
</div>
</body>
</html>
多行溢出省略号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.test
{
white-space:wrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
</style>
</head>
<body>
<p>div 使用多行,溢出省略号...</p>
<div class="test" style="text-overflow:ellipsis;"><span>This is some long text that will not fit in the box</span></div>
</body>
</html>