css超过两行显示为...

要实现CSS超过两行显示为省略号（...），可以使用CSS3属性来实现。首先，需要设置一个固定宽度的容器，比如设置宽度为200px。然后，设置overflow属性为hidden，超出部分隐藏起来。接下来，使用text-overflow属性将超出部分显示为省略号。最后，使用display属性和-webkit-line-clamp属性来限制显示的行数。具体的CSS代码如下所示：

<style>
.container {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 显示两行 */
-webkit-box-orient: vertical;
}
</style>

<div class="container">
内容部分内容部分内容内容部分内容部分内容内容部分内容部分内容内容部分内容部分内容
</div>

通过以上设置，文本内容超过两行时，就会显示为省略号(...)。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [CSS文本设置超出2行显示省略号](https://blog.csdn.net/weixin_44582045/article/details/125203749)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [CSS文本超过2行省略号（...）显示](https://blog.csdn.net/guozhangqiang/article/details/102581681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]