文字过长时隐藏超过部分,并段尾显示展开按钮
最近工作中有小弟问了我一个很简单的问题(如题),我以为网上肯定会有解决办法就叫她去问百度,没想到她查了半天也没弄出个所以然。我也查了一下,各种帖子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里面,建议再好好学学基础吧
思路放在这里,其实是很简单的东西
推荐阅读
- 太平之莲
- 七年之痒之后
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- 2021-02-10(找不回的“年味”……)
- 生命过客——第10章|生命过客——第10章 初为人母
- gitlab|gitlab 通过备份还原 admin/runner 500 Internal Server Error
- 回忆曾经看过的小说
- 那些年我们玩过的街机
- 说得清,说不清
- 2017-7-17