单行文本溢出省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
复制代码
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
border: 1px solid red;
max-width:200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div>11111111111111111118877777777777777777</div>
</body>
</html>
复制代码
多行文本溢出省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
复制代码
-webkit-line-clamp: 2;
可以设置行数
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
border: 1px solid red;
max-width:100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
</head>
<body>
<div>111111111111111111113333333333
1111111111111111111111
111118855555555555
77777777777
777777</div>
</body>
</html>
复制代码