尖端！CSS全块文本溢出和省略号特性探索

瀵逛簬涓婅堪瓒呭嚭鐨勬儏鍐碉紝鎴戜滑甯屾湜瓒呭嚭姝ｆ枃闀垮害鐨勬暣绡団€斺€斿墠绔伐绋嬪笀锛屾暣浣撶渷鐣ャ€傚鏋滄垜浠洿鎺ヤ娇鐢ㄤ笂闈㈢殑鏂规骞朵娇鐢ㄤ笅闈㈢殑CSS锛岀粨鏋滀細鏄繖鏍风殑锛岃€屼笉鏄垜浠鏈熺殑鏁翠釜鍧楃渷鐣ワ細.person-card__desc{width:200px;绌虹櫧锛歯owrap锛涙孩鍑猴細闅愯棌锛泃ext-overflow:ellipsis;}灏哾isplay:inline鏇存敼涓篸isplay:inline-block浠ョ渷鐣ユ暣涓潡銆傝繖閲岋紝濡傛灉鎴戜滑闇€瑕佺渷鐣ユ暣涓猙lock锛屽彧闇€瑕佸皢鍖呰９鏁翠釜label鍏冪礌鐨剆pan鐨勬樉绀虹敱inline鏀逛负inline-block鍗冲彲銆?.person-card__descspan{display:inline-block;}杩欐牱灏卞彲浠ュ疄鐜颁簡锛岀渷鐣ヤ簡鍩轰簬鏁村潡鍐呭鐨勬孩鍑恒€傚畬鏁磀emo鍙互鐐瑰嚮杩欓噷锛欳odePenDemo-鏁村潡瓒呴暱婧㈠嚭鐐归仐婕忛棶棰?锛歩OS涓嶆敮鎸佹暣鍧楄秴闀挎孩鍑虹偣閬楁紡浣嗘槸锛屼笂杩版柟妗堝苟涓嶅畬缇庛€傜粡瀹炴祴锛屼笂杩版柟妗堝湪iOS鍜孲afari涓嬪潎鏈兘鐢熸晥銆傝〃鐜板涓嬶細鏌ョ湅瑙勮寖-CSSBasicUserInterfaceModuleLevel3-text-overflow銆傚師鍥犳槸text-overflow鍙兘绠＄悊鐪佺暐鐨勫唴鑱斿厓绱犮€傦紙Chrome鍙兘瀵规鍋氫簡涓€浜涗紭鍖栵紝鎵€浠ヤ互涓婇潪iOS鍜孲afari鍦烘櫙閮芥槸姝ｅ父鐨勶級鎵€浠ョ寽娴嬫槸缁忚繃display:inline-block鐨勮浆鎹紝涓嶅啀鏄弗鏍兼剰涔変笂鐨勫唴鑱斿厓绱犮€傝В鍐冲姙娉曪紝鐢ㄥ琛岀渷鐣ュ彿浠ｆ浛鍗曡鐪佺暐鍙峰綋鐒讹紝杩欓噷缁忚繃瀹為獙锛屽彂鐜拌繕鏄湁瑙ｅ喅鍔炴硶鐨勩€傛垜浠湪寮€澶翠篃鎻愬埌浜嗗琛岀渷鐣ュ彿鐨勮В鍐虫柟妗堛€傛垜浠皢澶氳鐪佺暐鍙蜂唬鐮佹浛鎹负鍗曡鐪佺暐鍙凤紝鍙渶灏嗚Thenumber-webkit-line-clamp:2鏀逛负涓€琛?webkit-line-clamp:1鍗冲彲銆?person-card__desc{瀹藉害锛?00px锛涚┖鐧斤細姝ｅ父锛涙孩鍑猴細闅愯棌锛涙枃鏈孩鍑猴細鐪佺暐鍙凤紱鏄剧ず锛?webkit-box锛?webkit-line-clamp:1;-webkit-box-orient锛氬瀭鐩达紱}.person-card__descspan{display:inline-block;}杩欐牱鍦╥OS/Safari涓嬪氨鍙互瀹岀編瀹炵幇鏁翠釜瓒呴暱婕忕偣锛欳odePenDemo--iOS涓嬭秴闀挎孩鍑烘紡鐐规柟妗堝€煎緱娉ㄦ剰鐨勬槸锛屾渶閲嶈鐨勬槸锛屽湪浣跨敤-webkit-line-clamp鏂规鏃讹紝蹇呴』閰嶅悎white-space:normal鍏佽鎹㈣锛岃€屼笉鏄笉鍏佽鎹㈣銆傝繖涓€鐐瑰緢閲嶈銆傝繖鏍锋垜浠氨瀹炵幇浜嗗畬鍏ㄥ吋瀹圭殑鍏ㄥ潡瓒呴暱鍦嗙偣鐪佺暐銆傚綋鐒?webkit-line-clamp鏈韩涔熷瓨鍦ㄤ竴瀹氱殑鍏煎鎬ч棶棰橈紝闇€瑕佸湪瀹為檯涓€夋嫨銆傛渶鍚庯紝鏈枃鍒版缁撴潫锛屼竴涓畝鍗曠殑CSStrick锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>