vue-ellipsis-component涓烘弧瓒冲悇绉嶅満鏅€岀敓鏂囨湰缂╃暐鍥炬槸涓氬姟涓渶甯歌鐨勯渶姹備箣涓€锛岄€氬父鎴戜滑浣跨敤webkit-line-clamp鏉ュ疄鐜版枃鏈缉鐣ュ浘锛屼絾鏄繖涓粎闄愪簬澶氳缂╁啓銆傚鏋滈偑鎭禤M鑴戞礊澶у紑锛岄渶瑕佷綘鏀拺瓒呰繃涓€瀹氶珮搴︼紝浣犲彲浠ョ畝鍐欌€︹€︿负浜嗕笉璁╄嚜宸卞湪杩欑鍦烘櫙涓嬫墜瓒虫棤鎺紝鎴戝喅瀹氬厛鎽哥储鐜版湁鐨剉ue缂╃暐鍥剧粍浠讹紒涓€鐣悳绱㈠悗锛屾壘鍒颁簡涓€涓獀ue缂╃暐鍥剧粍浠讹細椤句竴鍑屽紑婧愮殑vue-clamp锛屽ぇ鑷村姛鑳藉涓嬶細鏀寔澶氳缂╃暐鍥撅紝鏀寔鏈€澶ч珮搴﹁秴杩囨渶澶ч珮搴︽椂缂╃暐鍥惧畾涔夌缉鍐欙紝鏀寔鑷畾涔夊悓鏃舵敮鎸佺缉鍐欐敮鎸佺缉鍐欏洖璋冿紝鍑虹幇鎴柇鏃惰Е鍙戞敮鎸佽嚜閫傚簲缂╁啓Vue-clamp鏀寔鐨勫姛鑳芥尯榻愬叏鐨勶紝琛屾埅鏂殑瀹炵幇鍘熺悊涔熸尯鏈夋剰鎬濄€備富瑕佹槸鍒╃敤getClientRectsAPI鐨勭壒鎬э紝鍙互鐩存帴鑾峰彇琛屽唴鍏冪礌鐨勮鏁帮紝涓嶉渶瑕佹墜鍔ㄨ缃甽ine-height銆傚叿浣撳彲浠ユ煡鐪婱DN锛佷絾鏄紝vue-clamp鍙敮鎸佺函鏂囨湰缂╁啓銆傚鏋滈亣鍒板瘜鏂囨湰鍦烘櫙锛屽彲浠tretched锛岃繖鏃讹紝鎴戝彂鐜颁簡涓€涓猺eact缂╃暐璇粍浠讹細react-ellipsis锛屽姛鑳芥洿鍏細鏀寔澶氳缂╃暐璇敮鎸佽秴杩囨渶澶ч珮搴︽椂缂╃暐璇敮鎸佽嚜瀹氫箟缂╃暐璇敮鎸佺缉鐣ヨ鍥炶皟锛屾埅鏂椂瑙﹀彂鏀寔瀵屾枃鏈缉鍐欐敮鎸佸熬閮ㄦ枃鏈繃婊ゆ敮鎸佽嚜閫傚簲缂╁啓瓒呰繃n琛屾椂鏄剧ずm琛岋紝瓒呰繃n琛屾椂鏄剧ず楂樺害n閭ｄ箞锛屾垜浠户缁紝绉绘锛堝鍒讹級鎴愪竴涓獀ue缁勪欢~vue-ellipsis-component璇炵敓浜嗭紒绠€鍗曚粙缁嶇粍浠剁殑鍔熻兘鍜屽師鐞嗮煂皏ue-ellipsis-component瀹屽叏绉绘浜唕eact-ellipsis鐨勫姛鑳斤紙copy搴旇瀹屾暣锛夛紝缁欎釜绠€鍗曠殑demo锛?template>鏇村demo鍙互鐪嬫枃妗缂╁啓绛栫暐vue-ellipsis-component浼氭牴鎹紶鍏rops鐨勫鏉傜▼搴﹂噰鐢ㄤ笉鍚岀殑缂╃煭绛栫暐銆傛瘮濡備笂闈㈢殑渚嬪瓙锛屽琛岀缉杩涘彧浼犲叆浜唗ext鍜寁isibleLine锛屾墍浠ョ粍浠朵細鏍规嵁甯歌绛栫暐瀹炵幇澶氳缂╄繘锛氫娇鐢╟ss-webkit-line-clamp灞炴€ц繘琛岀缉鐣ワ紱濡傛灉瓒呰繃鏈€澶ч珮搴﹂渶瑕佺缉鍐欙紝浼氶噰鐢ㄥ姩鎬佽绠楃瓥鐣ワ細浣跨敤JavaScript鍔ㄦ€佽绠楃缉鍐欑偣锛岀劧鍚庤鍓枃鏈唴瀹癸紝姣斿涓嬮潰鐨刣emo锛?template>鑰屽湪鍔ㄦ€佽绠楃瓥鐣ヤ腑锛寁ue-ellipsis-component浣跨敤浜屽垎娉曟彁楂樻枃鏈缉鍐欑殑鎬ц兘锛佽嚜閫傚簲缂╁啓vue-ellipsis-component閫氳繃浼犲叆reflowOnResize鏉ュ疄鐜拌嚜閫傚簲缂╁啓銆傞粯璁ゆ儏鍐典笅锛孯esizeObserver鐢ㄤ簬鐩戞帶瀹瑰櫒涓殑鍙樺寲銆傚鏋滄祻瑙堝櫒涓嶆敮鎸丷esizeObserver鐨勮瘽锛屼娇鐢╳indow.resize浣滀负闄嶇骇鏂规馃槃瀵屾枃鏈缉鍐檝ue-ellipsis-component閫氳繃浼犲叆useInnerHtml瀹炵幇瀵屾枃鏈缉鍐欙紝灏嗘枃鏈彃鍏om涓篐TML锛屾墍浠ラ渶瑕佽嚜宸变繚璇佹枃鏈唴瀹癸紝闃叉璺ㄧ珯鑴氭湰鏀诲嚮锛?template>杩欐槸涓€娈?/b><u>闈炲父闈炲父闈炲父闈炲父闈炲父闈炲父闈炲父闈炲父闈炲父闈炲父闈炲父闈炲父闈炲父闈炲父闀?/u>words">缂哄皯缁勪欢涓嶅悓浜巚ue-clamp锛寁ue-ellipsis-componentneedsyouManuallysetaline-height:鍦ㄦ弧瓒抽€氱敤绛栫暐鐨勬儏鍐典笅锛屾槸鍚︿富鍔ㄨ缃甽ine-height瀵圭缉鍐欑粨鏋滄病鏈夊奖鍝嶏紝浣嗗湪缂╁啓鐨勫姩鎬佽绠椾笅锛宭ine-height鍙兘浼氬鑷寸缉鐣ョ粨鏋滀笉绗﹀悎棰勬湡锛涘姩鎬佽绠楃殑缂╃暐绛栫暐鏄牴鎹甽ine-height鍜屼紶鍏ョ殑visibleLine璁＄畻鍑轰竴涓彲瑙侀珮搴︼紝鐒跺悗鐢ㄨ繖涓彲瑙侀珮搴︿笌褰撳墠瀹瑰櫒鐨勯珮搴﹁繘琛屾瘮杈冨垽鏂槸鍚﹂渶瑕佹枃鏈鍓紝鍙互鐪嬪嚭锛岃繖涓狝杩囩▼寰堝ぇ绋嬪害涓婂彇鍐充簬line-height锛涘綋line-height涓洪粯璁ゅ€糿ormal鏃讹紝瀹為檯琛岄珮鍙栧喅浜庢祻瑙堝櫒锛屼絾鍚勬祻瑙堝櫒鐨勫€煎彲鑳戒笉涓€鑷淬€倂ue-ellipsis-component浼氬吋瀹筶ine-height:normal锛屼絾鏄负浜嗕繚璇佸湪涓嶅悓娴忚鍣ㄤ笅鐨勭缉鍐欐晥鏋滀竴鏍凤紝鏈€濂戒富鍔ㄨ缃竴涓猯ine-height锛佷粨搴撳湴鍧€Github鍦板潃锛歷ue-ellipsis-component鏂囨。鍦板潃锛歞ocs濡傛灉瑙夊緱瀵逛綘鏈夌敤锛屽彲浠ュ湪浣犵殑椤圭洰涓畨瑁呬娇鐢紝鎴栬€呯粰涓猻tar猸愶笍锛侀棶棰樺弽棣堝鏋滄偍鍙戠幇缁勪欢鏈夐棶棰樻垨涓嶈冻锛屽彲浠ュ皢鎮ㄧ殑闂鎻愪氦鍒癵ithubissue锛屾垨鑰呮彁浜ullRequest锛岃阿璋㈠弬涓庯紒
