<!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>
效果圖
說明一下
- 需要設(shè)置寬度就斤，不然沒有效果,可以通過繼承父元素
- display:box,是display:flex 之前的版本悍募，需要添加私有前綴，詳細(xì)的大家可以查一下資料
- 有幾個(gè)屬性可能不是常用洋机，word-wrap,text-overflow
- 這個(gè)對(duì)移動(dòng)端的效果較好一些坠宴，因?yàn)橐苿?dòng)端的瀏覽器大多是 webkit 的內(nèi)核
