文字过长时隐藏超过部分,并段尾显示展开按钮

最近工作中有小弟问了我一个很简单的问题(如题),我以为网上肯定会有解决办法就叫她去问百度,没想到她查了半天也没弄出个所以然。我也查了一下,各种帖子7788都不是很完整。只好手写了html给她。
记录一下希望能帮到需要的新人。
先放上效果图 【文字过长时隐藏超过部分,并段尾显示展开按钮】
上代码

测试 为了证明楼下的那货不会对我造成影响7月20日,南京市通报,禄口国际机场工作人员定期核酸检测样品中,有9例检测结果呈阳性。截至27日24时,南京市新冠肺炎感染者增至155例。此外,安徽、辽宁、广东、四川等多省均报告新冠肺炎南京关联感染者,多为途经禄口机场的旅客。 为了证明楼上的那货不会对我造成影响点这试试一段比较长的文字 点这试试一段比较短的文字.content-box { position: relative; }.content-box .text { line-height: 25px; }.content-box button { position: absolute; right: 2px; bottom: 2px; }.top-prove { height: 100px; width: 100%; background: #dddddd; text-align: center; line-height: 100px; }.bottom-prove { height: 100px; width: 100%; background: #dddddd; text-align: center; line-height: 100px; }.change-buttom { font-size: 14px; color: #2371be; }.long { text-align: center; height: 21px; }.short { text-align: center; height: 20px; }

结语 因为是手写的,所以用了原生js
如果不知道怎么放到vue或者react里面,建议再好好学学基础吧
思路放在这里,其实是很简单的东西

    推荐阅读