这应该在webkit浏览器中工作:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

浏览器支持

div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } * { font-family: verdana; } <div> The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end. </div>

我发现Skeep的回答是不够的，还需要一个溢出样式:

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

这应该在webkit浏览器中工作:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

浏览器支持

div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } * { font-family: verdana; } <div> The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end. </div>

它是一个非标准的CSS，当前版本的CSS中没有涵盖它(Firefox不支持它)。尝试使用JavaScript。

我以前使用过jquery - condensed -plugin，看起来它可以做你想做的事情。如果不是，有不同的插件可以满足您的需求。

编辑:给你做了一个演示-注意，我在演示中链接了jquery. condene .js，这是有魔力的，所以完全归功于该插件的作者:)

迟回复，但一个html换行也可以，所以你可以做一个html + css唯一的解决方案。所以通常使用br元素是不好的做法，但如果你用br打断了注释，text-overflow省略号将从html文本的下一行开始。