目录
单行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ellipsis</title>
<style type="text/css">
.one{
width: 100px;
background:green;
color: #fff;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="one">单行文本溢出aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
多行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ellipsis</title>
<style type="text/css">
.two{
width: 100px;
background:blue;
color: #fff;
line-height: 24px;
max-height: 48px;
overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
</style>
</head>
<body>
<div class="two">多行文本溢出多行文本溢出。</div>
</body>
</html>