方法一:适用于定宽高;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.a{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布局，我参考自这里