页面中文本多行省略号点击展开的方法

it2022-05-05  123

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <style> .example { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; /* //想要的行数 */ -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .unfold{ -webkit-line-clamp: 0; } </style> </head> <body> <div id="example" class="example"> 林语堂说:“像苏东坡这样的人物,是人间不可无一,难能有二的。他的一生是载歌载舞,深得其乐,忧患来临,一笑置之。”《临江仙·夜归临皋》:夜饮东坡醒复醉,归来仿佛三更。家童鼻息已雷鸣。敲门都不应,倚杖听江声。长恨此身非我有,何时忘却营营。夜阑风静縠纹平。小舟从此逝,江海寄余生。去来兮,吾归何处……仍传语,江南父老,时与晒渔蓑。从初到黄州时的悲愤,到即将离去时的洒脱,是苏东坡与黄州彼此容纳,相互成全的过程。对苏东坡来说,黄州是他证悟涅槃、浴火重生的净土;对黄州而言,苏东坡不再是一个无关紧要的天地过客。人生的进退,往往蕴藉着不同的变数。 他追求的不是超然物外,而是用穷达融通的从容风度对待生活的困窘,努力营造一种氛围,给自己一点幽默感、一个微笑,用人间的温暖,排解心中的苦闷,享受大自然丰厚的赐予和每一个日子带来的快乐。北宋时的上流阶层只吃牛羊肉,不屑于吃猪肉,黄州时的苏东坡穷得叮当响,想解馋,只能吃“贱如泥”的猪肉,他经过反复实验,不仅发明了“东坡肉”,还将经验写入《猪肉颂》中。 </div> <button onclick="show()">展开</button> <script> function show(){ example.className = "unfold" } </script> </body> </html>

 


最新回复(0)