<!DOCTYPE html>
<html lang="en">
<head>
<title>protice</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<style>
*{
padding: 0;
margin: 0;
}
.wrap{
margin: 0 auto;
height: 200px;
width: 200px;
background-color: pink;
}
.text{
margin-bottom: 50px;
white-space: nowrap; /*单行省略 */
display:block: /*最好每次都写，有些浏览器不写会出现问题*/
text-overflow: ellipsis;
overflow: hidden;
}
.mutiline{ /*多行省略*/
position: relative;
white-space: pre-wrap;
line-height: 1.2em;
max-height: 3.6em;
overflow: hidden;
}
.mutiline:after{
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="wrap">
<p class="text">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p class="mutiline">年十大斯诺克拉斯苍井空垃圾卡视角出口量卡机的上课啦进度啊实打实大师款垃圾啊俩开车</p>
</div>
</body>
</html>
ps;如果一个文本全是英文构成且没有空格间隔开的话，会被认为是一个单词，即使再长也不会出现换行
657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
