单行：
p {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行：
div {
width: 50px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 显示的行数
overflow: hidden;
}
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<style>
div {
width: 50px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 显示的行数
overflow: hidden;
}
p {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<body>
<p>打算的萨达四大</p>
<div>
大声道撒大所大所大所多撒大所多撒大所大
大声道撒大所大所大所多撒大所多撒大所大
大声道撒大所大所大所多撒大所多撒大所大
</div>
</body>
</html>
效果如下：
