文本超出两行显示省略号
时间: 2023-08-17 15:14:21 浏览: 58
回答: 要实现文本超出两行显示省略号的效果,可以使用CSS3的text-overflow属性和-webkit-line-clamp属性。首先,设置文本容器的宽度和高度,并将overflow属性设置为hidden,以实现溢出隐藏的效果。然后,使用text-overflow属性将超出部分的文本显示为省略号。最后,使用-webkit-line-clamp属性将超出两行的部分显示为省略号。这样就可以实现文本超出两行显示省略号的效果。\[1\]另外,还可以使用JS来计算文本的行数,根据行数来判断是否显示"展开"或"收起"按钮。这样可以更加灵活地控制文本的显示效果。\[3\]
#### 引用[.reference_title]
- *1* *2* [文本超出部分显示省略号](https://blog.csdn.net/JJ_Smilewang/article/details/123992510)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [文本超出两行显示省略号并有“展开”“收起”按钮效果(VUE环境)](https://blog.csdn.net/cha1919/article/details/107631856)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]