鐩戝惉鎸夐挳鐨勭偣鍑昏涓轰娇鐢ㄤ簡鎻愬埌鐨凜hecked浼被鏂囩珷寮€澶达細input[name="toggle"]:checked{&+p{-webkit-line-clamp:unset;}}杩欐牱锛屽綋鐢ㄦ埛鐐瑰嚮锛堥€変腑锛夋椂锛屾墍鏈夌殑鏂囧瓧閮戒細鏄剧ず鍑烘潵锛屽鏋滄病鏈夐€変腑锛屾枃瀛椾細鎶樺彔璧锋潵锛氭寜閽枃瀛楀姩鎬佸悎鐞嗐€傛樉绀烘墍鏈夋枃瀛楀悗锛屾寜閽枃瀛楄鍒囨崲涓衡€滄敹璧锋枃瀛椻€濓紝濡備綍鐢–SS淇敼鏂囧瓧锛屽叾瀹炲氨鏄埄鐢ㄤ吉鍏冪礌鐨勫唴瀹广€傚幓鎺塇TML涓殑鏂囨湰锛岀劧鍚庣敤CSS鎺т欢鏇挎崲锛?labelfor="toggle">label{&::after{content:"Showmore";}}鍚岀悊鍙緱锛歩nput[name="toggle"]:checked{&~label{&::after{content:"Collapsetext";鏁堟灉濡備笅锛氬鏋滄寜閽牱寮忎笐锛岄偅灏辫嚜宸辫皟鏁答煒撴寜閽嚭鐜扮殑鏉′欢鏄綋鏂囧瓧灏戜簬涓夎鏃讹紝鎸夐挳涓嶅簲璇ュ嚭鐜帮紝鍥犱负娌″繀瑕侊細澶ч棶棰橈紝涓婄綉鏌ヤ簡涓€涓嬶紝鍙戠幇娌℃湁浼被鍙互鍒ゆ柇鏂囨湰鏄惁琚埅鏂紝濡傛灉鏄紝鎴戜滑鍙互杩欐牱锛歱{&:truncated{&+label{鏄剧ず锛氬牭濉?}}}label{display:none;}truncated琛ㄧず鎴柇銆備絾鍗充究濡傛锛屾垜浠殑闇€姹備篃鏃犳硶瀹炵幇锛屽洜涓哄綋浣犳樉绀烘墍鏈夋枃瀛楁椂锛屼綘鐨勬枃瀛椾笉浼氳鎴柇锛屾墍浠ユ寜閽細娑堝け锛氫互涓婃槸涓€娈礘S瀹炵幇鐨勬ā鎷熸晥鏋滐紝婧愮爜濡備笅:letlist=document.querySelectorAll("p");letobserver=newResizeObserver(entries=>{entries.forEach(item=>{item.target.classList[item.target.scrollHeight>item.contentRect.height?"娣诲姞":"鍒犻櫎"]("鎴柇");});});list.forEach(p=>{observer.observe(p);});鍘熺悊灏辨槸鐩戝惉鏂囨湰鍏冪礌鐨勫ぇ灏忓彉鍖栵紝鐒跺悗鍔ㄦ€佸鍔爐runcatedclassname馃槀鎵€浠ワ紝浣燙SS涓殑truncated浼被搴旇鏀规垚truncatedclass馃槗p{&.truncated{&+label{鏄剧ず锛氬潡锛涙垜浠笇鏈涘湪鍒囨崲鐨勬椂鍊欙紝鎸夐挳涓€鐩村湪锛岃€屼笉鏄湪鏂囨湰娌℃湁琚埅鏂殑鏃跺€欐寜閽笉鏄剧ず锛岃繖鏍锋垜浠氨涓嶉渶瑕佷竴鐩寸洃鍚枃鏈厓绱犵殑澶у皬鍙樺寲锛屾垜浠彧闇€瑕佷竴涓垵濮嬪€硷紙鍒濆鍖栨枃鏈椂鏄惁鎴柇鏂囨湰锛夛紝鍗冲彧鐩戝惉涓€娆★紒entries.forEach(item=>{//...鍘熶唬鐮乷bserver.unobserve(item.target);//绉婚櫎鐩戣鍣▆);鎴栬€呬綘鏍规湰涓嶉渶瑕佺敤杩欎釜API锛岀洿鎺ュ垵濮嬪寲椤甸潰鐨勬椂鍊欙紝閬嶅巻鍒ゆ柇灏辫浜嗭紒璁﹍ist=document.querySelectorAll("p");list.forEach(item=>{item.classList[item.scrollHeight>item.offsetHeight?"add":"remove"]("truncated");});,P鍏冪礌鍦ㄩ〉闈㈠垵濮嬪寲鏃讹紝浼氳嚜鍔ㄦ坊鍔犳埅鏂殑绫诲悕锛屾寜閽彲浠ヤ竴鐩存樉绀猴細姣斿鍙互鑷畾涔夋寜閽牱寮忥紝鍦ㄥ簳閮ㄦ坊鍔犻€忔槑娓愬彉閬僵锛岃繃娓℃椂浜ゆ崲鏁堟灉馃榿鎬荤粨Checked浼被鏄釜濂戒笢瑗匡紝涓嶇敤鍐橨S灏卞彲浠ユ弧瓒冲緢澶氶渶姹傦紝鎵€浠ュ彲浠ヨ€冭檻鐢ㄥ畠鏉ヨ繘琛屼换浣曞垏鎹㈢被鐩稿叧鐨勬搷浣溿€傚鏋滆寰楄繖绡囨枃绔犱笉閿欙紝璇蜂笉瑕佸繕璁扮偣璧炲叧娉ㄥ摝~馃槉浜ゆ祦寰俊鍏紬鍙封€滃墠绔畤瀹欐儏鎶ュ眬鈥濓紝浼氫笉瀹氭椂鏇存柊鏈€鏂板疄鐢ㄧ殑鍓嶇鎶€宸?鎶€鏈枃绔犳椂闂淬€傚浜嗭紝鍋跺皵杩樹細鏈夌綉缁滆叮浜嬸煃诲叧娉ㄥ叕浼楀彿锛屽洖澶嶁€?鈥濊幏鍙栫兢鑱婁簩缁寸爜锛屼竴璧峰涔狅紝涓€璧蜂氦娴侊紝涓€璧烽挀楸拣煂?/p>