方法一:適用於定寬高;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.a{width:400px;height:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
</style>
</head>
<body>
<p class="a">有一次他被她跟煩了，板着臉問：“趙默笙，你為什么老是跟着我？”她睜大眼睛：“以琛，是你笨還是我笨，哎，你那么聰明，一定是我笨了，我怎么這么失敗，追了半天人家都不知道我在干什么！” 那時候他就老是要讓她等。有一次她等久了朝他發脾氣。“我都數到九百九十九了，你才來！下次要是讓我數到一千我就再也不理你！”結果又一次，他被系里臨時抓去開會，冗長的會議終於完了后他跑去，她居然還在這次她等得脾氣都沒了，只是委委屈屈地看着他說：“以琛，我都數了好幾個九百九十九了。”而這七年來，他又多少次數九百九十九？不是沒想過放棄，只是始終沒辦法數到一千。</p>
</body>
</html>
-
overflow:hidden:超出隱藏 -
white-space:nowrap:強制不換行 -
text-overflow:ellipsis:超出省略號代替;
方法二:適用於不定寬高,但有兼容性問題,多用在移動端;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.b {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
</style>
</head>
<body>
<p class="b">有一次他被她跟煩了，板着臉問：“趙默笙，你為什么老是跟着我？”她睜大眼睛：“以琛，是你笨還是我笨，哎，你那么聰明，一定是我笨了，我怎么這么失敗，追了半天人家都不知道我在干什么！” 那時候他就老是要讓她等。有一次她等久了朝他發脾氣。“我都數到九百九十九了，你才來！下次要是讓我數到一千我就再也不理你！”結果又一次，他被系里臨時抓去開會，冗長的會議終於完了后他跑去，她居然還在這次她等得脾氣都沒了，只是委委屈屈地看着他說：“以琛，我都數了好幾個九百九十九了。”而這七年來，他又多少次數九百九十九？不是沒想過放棄，只是始終沒辦法數到一千。</p>
</body>
</html>
-
display:-webkit-box:box-flex布局 -
-webkit-box-orient:vertical:垂直排列子元素 -
-webkit-line-clamp:3:顯示幾行 -
overflow:hidden:超出隱藏;
關於box-flex布局，我參考自這里