js 两行溢出省略 三行露出

要实现两行溢出省略的效果，可以使用CSS的-webkit-line-clamp属性。首先，设置要显示文本的容器的高度，并添加属性overflow: hidden;来隐藏超出部分的文本。然后，使用-webkit-box-orient: vertical;将文本框设置为垂直方向。最后，使用-webkit-line-clamp: 2;来限制显示两行文本。这样，如果文本超过两行，剩余的文本会被省略号代替。这个属性在某些浏览器中可能不起作用，所以需要加上一些额外的样式来兼容这些浏览器。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [多行溢出省略号显示（ccs/js）实现！](https://blog.csdn.net/weixin_47679798/article/details/112330035)[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 设置超过再两行显示省略号](https://blog.csdn.net/weixin_35299004/article/details/119401567)[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 ]