CSS自动显示“全文”链接

鐒跺悗娣诲姞涓€浜涙牱寮忥紝-webkit-line-clamp瀹炵幇澶氳鎴柇銆傚寘瑁厈鑳屾櫙锛?fff;杈圭晫鍗婂緞锛?px锛涘～鍏咃細15px锛沚ox-shadow:20px20px60px#bebebe,-20px-20px60px#ffffff;}.text{婧㈠嚭锛氶殣钘?鏂囨湰婧㈠嚭锛氱渷鐣ュ彿锛涙枃鏈榻愶細瀵归綈锛?绾垮す锛?锛?*澶氳鐪佺暐*/-webkit-box-orient:vertical;line-height:1.5;}鍙互寰楀埌杩欎釜鏁堟灉銆傛樉鐒讹紝涓嬮潰鐨勯摼鎺ヤ竴鐩村瓨鍦ㄣ€傞偅涔堬紝CSS鏄浣曞尯鍒嗚繖涓ょ鎯呭喌鐨勫憿锛?.瀹炵幇涓嶅畬鍠勪竴寮€濮嬶紝鎴戝緢蹇兂鍒颁簡涓€涓疄鐜版柟娉曪紝濡備笅锛氬湪鏂囨湯鐢ㄤ竴涓厓绱犺鐩栦笅闈㈢殑閾炬帴锛屽彲浠ョ敤浼厓绱?:after鏉ュ疄鐜般€?text::after{鍐呭锛?';浣嶇疆锛氱粷瀵癸紱鏄剧ず锛氬潡锛涘搴︼細100%锛涢珮搴︼細50px锛?*鍙鑳借鐩栭摼鎺ュ嵆鍙?/background:red;}鏁堟灉濡備笅娉ㄦ剰涓婇潰鐨勫疄鐜帮紝鐢变簬璁剧疆缁濆瀹氫綅鏃舵病鏈夎缃畉op鍊硷紝::after浠嶇劧绱ц窡鍦ㄦ枃瀛楀悗闈€傚洜姝わ紝褰撴枃瀛楄秴鍑烘椂锛?:after宸茬粡鍦ㄥ彲瑙佽寖鍥翠箣澶栵紝鎵€浠ヤ笅闈㈢殑閾炬帴涓嶄細琚鐩栥€備簨瀹炰笂锛屽畠鏄繖鏍风殑銆傛渶鍚庯紝鐢ㄧ浉鍚岀殑鑳屾櫙棰滆壊鏇挎崲瑕嗙洊鐨勯鑹层€倀ext::after{鑳屾櫙锛氱户鎵匡紱/*缁ф壙鐖剁骇鍚庡彴*/}瀹屾暣浠ｇ爜鍙互璁块棶鑷姩灞曞紑灏侀潰锛坈odepen.io锛夐偅涔堜负浠€涔堣繖鏍蜂笉瀹岀編鍛紵缁嗗績鐨勬湅鍙嬪彲鑳藉凡缁忓彂鐜帮紝褰撻摼鎺ヤ笉鏄剧ず鐨勬椂鍊欙紝涓嬮潰鐨勭┖闂磋繕鏄鍗犵敤浜嗐€傚綋鎴戞妸杩欎釜浣撴偀鍛婅瘔鍚屼簨鐨勬椂鍊欙紝鐪熺殑鏄繖鏍风殑銆?.铏界劧瀹岀編瀹炵幇鐨勫姛鑳芥病鏈夐棶棰橈紝浣嗘槸瑙嗚涓婅偗瀹氭槸涓嶈兘鎺ュ彈鐨勩€備粩缁嗗姣斾袱绉嶆儏鍐典笅鐨勫尯鍒紝涓嶉毦鍙戠幇涓ょ鎯呭喌鐨勯珮搴︽槸涓嶄竴鏍风殑锛堭煒傛枃瀛楀皯鐨勬椂鍊欎細榛樿闄嶄綆涓€琛岄摼鎺ョ殑楂樺害锛夛紝鎵€浠ュ彲浠ヨ繖鏍锋兂鍏充簬瀹冿紝濡備綍闄嶄綆瀹瑰櫒鐨勯珮搴︼紵杩欓噷鎴戞兂鍒颁簡涓€涓礋杈硅窛锛屽疄鐜板涓嬮鍏堬紝缁濆瀹氫綅涓嶈兘鍐嶇敤浜嗐€倀ext::after{鍐呭锛?';/*浣嶇疆锛氱粷瀵癸紱*/鏄剧ず锛氬潡锛涢珮搴︼細50px锛?*闅忎究缁欎竴涓珮搴︿篃鍙互鏄?*/background:red;}杩欓噷杩欓噷鍙互缁欎换鎰忛珮搴︼紝涔熷彲浠ユ槸0銆備负浜嗛鑹叉柟渚匡紝缁欎簡50px锛岃儗鏅壊琚坊鍔犮€傝繖鏍凤紝鏂囧瓧灏戞椂鐨勬晥鏋滃涓嬶紙鏂囧瓧澶氭椂锛屽凡缁忚秺鐣屼簡锛屼笉鍙楀奖鍝嶏級鎺ヤ笅鏉ョ粰::after璁剧疆涓€涓礋鐨刴argin-top锛屽亣璁鹃摼鎺ョ殑楂樺害涓?0锛岄偅涔堥渶瑕佸皢鑷韩鐨勯珮搴︿笂绉诲姞涓?0锛屽嵆.text::after{/*otherstyles*/margin-top:-70px;/*50+20*/}鍙互鍙戠幇閾炬帴鐨勯珮搴﹀凡缁忓噺鍘绘暣涓鍣ㄧ殑楂樺害銆傛紨绀哄涓嬶紝涓嶈繃涓嬮潰鐨勯摼鎺ョ幇鍦ㄨ繕鏄彲瑙佺殑銆傝繖鏃跺€欏彲浠ュ鍒朵竴涓枃瀛楀彔鍔狅紝骞惰缃浉鍚岀殑鏍峰紡锛岀劧鍚庝娇鐢ㄧ粷瀵瑰畾浣嶅彔鍔狅紙璁板緱鍔犺儗鏅級CSSmargin-thebottom灞炴€х敤浜庤缃厓绱犵殑涓嬭竟璺濓紝鍏佽璁剧疆璐熷€笺€傛鍊煎皢浣垮叾鐩稿浜庢甯告祦绂荤浉閭诲潡鏇磋繙锛岃€岃礋鍊煎皢浣垮叾鏇磋繎銆?/p>CSS鐨刴argin-bottom灞炴€х敤鏉ヨ缃厓绱犵殑搴曢儴澶栬竟璺濓紝鍏佽璁剧疆璐熷€笺€傛鍊煎皢浣垮叾鐩稿浜庢甯告祦绂荤浉閭诲潡鏇磋繙锛岃€岃礋鍊煎皢浣垮叾鏇磋繎銆?/p>