js 两行溢出省略 三行露出
时间: 2023-09-27 13:11:05 浏览: 85
多行文本溢出显示省略号
要实现两行溢出省略的效果,可以使用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 ]
阅读全文