<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我不知道我能不能做得出来，但是还要做的</title>
<style>
p{
width:50%;
overflow:hidden;
display:-webkit-box;
text-overflow:ellipsis;
word-wrap:break-word;
-webkit-line-clamp:2; /*控制需要显示多少行*/
-webkit-box-orient:vertical;
}
</style>
</head>
<body>
<p>我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本我是长文本</p>
</body>
</html>
效果图
说明一下
- 需要设置宽度，不然没有效果,可以通过继承父元素
- display:box,是display:flex 之前的版本，需要添加私有前缀，详细的大家可以查一下资料
- 有几个属性可能不是常用，word-wrap,text-overflow
- 这个对移动端的效果较好一些，因为移动端的浏览器大多是 webkit 的内核
网友评论