鍦╩ac鏂囦欢绠＄悊涓湁杩欎箞涓€涓皬缁嗚妭銆傚綋鏂囦欢鍚嶄笉瓒呰繃涓€琛屾椂锛屽皢瀹屾暣鏄剧ず銆傝繖鏃跺€欓紶鏍囨斁鍦ㄤ笂闈㈡槸娌℃湁鎻愮ず鐨勩€傚綋鏂囦欢鍚嶈秴杩囦竴琛屾椂锛屼細鍑虹幇涓€涓渷鐣ュ彿銆傝繖鏃跺€欓紶鏍囨斁鍦ㄦ彁绀轰笂浼氭樉绀哄畬鏁寸殑鏂囦欢鍚嶃€備竴涓緢缁嗗井浣嗘槸寰堜汉鎬у寲鐨勭粏鑺傦紙ps.瀹屽叏鍙互鐪嬪嚭鏉ヤ笉闇€瑕佹彁绀吼煒橈級銆傚叾瀹炶繖绉嶆晥鏋滃湪web涓婇€氳繃绠€鍗曠殑CSS灏卞彲浠ヨ交鏉惧疄鐜般€備笅闈竴璧锋潵鐪嬬湅鍚1.CSS瀹炵幇鎬濊矾title灞炴€х浉淇″ぇ瀹堕兘鐭ラ亾锛屽畠鏄敤鏉ュ仛鍘熺敓鎻愮ず鐨勩€傚彲浠ヨ鏄粠涓婂彜涓栫邯灏卞緱鍒颁簡鏀拺銆備笅闈㈡槸MDN涓婂璇ュ睘鎬х殑浠嬬粛銆倀itle鍏ㄥ眬灞炴€у寘鍚负浜嗚〃绀哄挩璇俊鎭枃鏈紝瀹冧笌鍏舵墍灞炵殑鍏冪礌鐩稿叧銆傝繖浜涗俊鎭€氬父瀛樺湪锛屼絾浠庢潵閮戒笉鏄繀闇€鐨勶紝浣滀负鎻愰啋鏄剧ず缁欑敤鎴烽潪甯哥畝鍗曘€?pclass="txt"title="Thisisabsolute">璇ュ厓绱犲皢琚Щ鍑烘甯哥殑鏂囨。娴侊紝骞朵笖涓嶄細涓鸿鍏冪礌淇濈暀浠讳綍绌洪棿锛屽畠閫氳繃鎸囧畾鍏冪礌鐩稿浜庢渶杩戦潪鍏冪礌鐨勫亸绉婚噺鏉ョ‘瀹氳鍏冪礌鐨勪綅缃?static瀹氫綅鐨勭鍏堝厓绱犮€傜粷瀵瑰畾浣嶇殑鍏冪礌鍙互鍦ㄤ笉涓庡叾浠栬竟璺濆悎骞剁殑鎯呭喌涓嬭缃竟璺濄€?/p>杩欓噷鏍囬鐨勫憟鐜版柟寮忓拰鍋滅暀鏃堕棿涓庢搷浣滅郴缁熷拰娴忚鍣ㄦ湁鍏筹紝涓嶈兘淇敼銆傜幇鍦ㄧ殑闂鏄痶itle灞炴€ф槸棰勫姞鐨勶紝鏃犳硶閫氳繃style鎺у埗鏄惁鏄剧ず銆傞偅涔堬紝濡備綍瀵笴SS杩涜鍔ㄦ€佸鐞嗗憿锛熷啀寰€涓嬬湅锛岃櫧鐒禼ss涓嶈兘鍔ㄦ€佹敼鍙榯itle灞炴€э紝鎹釜鎬濊矾锛屽鏋滄湁涓や釜鐩稿悓鐨勬枃鏈紝鍏朵腑涓€涓湁title灞炴€э紝姣斿鍏冪礌灏嗚绉诲嚭姝ｅ父鏂囨。娴佸苟涓斾笉涓哄厓绱犱繚鐣?/span>鍏冪礌灏嗚绉诲嚭姝ｅ父鏂囨。娴佺殑鏂囨。娴佹槸涓嶄负鍏冪礌棰勭暀鐨勩€?/span>
涓轰簡婕旂ず鏂逛究锛岃繖閲屾垜浠粰甯︽湁title灞炴€х殑鏂囨湰娣诲姞涓€涓儗鏅壊锛岀劧鍚庡垎鍒О涔嬩负TextA鍜孴extB鏆備笖锛堜笅鍥鹃€傜敤锛夛紝濡備笅鍥炬墍绀猴紝鐜板湪鎴戜滑鍙渶瑕佸湪鍗曡鏂囧瓧鐨勬椂鍊欐樉绀烘枃瀛桝锛屽琛屾枃瀛楃殑鏃跺€欐樉绀烘枃瀛桞锛屽氨鍙互瀹炵幇鎴戜滑鎯宠鐨勫姛鑳戒簡.閭ｄ箞锛屽浣曞垽鏂枃鏈槸鍚﹁秴杩囦竴琛屽憿锛?銆佸琛屾枃瀛楃殑鍒ゆ柇棣栧厛锛屽綋鏂囧瓧瓒呰繃涓€琛屾椂锛岄珮搴﹀繀鐒朵細鍙戠敓鍙樺寲锛堭煒傦級銆傚亣璁捐楂樻槸1.5锛岄偅涔?琛屾枃瀛楁槸1.5em锛?琛屾槸3em锛屼互姝ょ被鎺ㄢ€︹€︿絾鏄鏋滄垜浠妸A鐨勬渶澶ч珮搴﹂檺鍒朵负涓よ锛岄偅涔堝尯鍒嗕竴琛屽拰澶氳锛堝崟琛岄珮搴︿负1.5em锛屽琛岄珮搴︿负3em).txt{display:block;max-height:3em;/*鏈€澶ч珮搴︿负2琛?/}鐜板湪鍏抽敭涓€姝ユ槸灏嗘枃瀛桞涓婄Щ2琛岋紝鍙互閫氳繃鐩稿瀹氫綅瀹炵幇锛堜篃鍙互鐢╩argin锛夈€傛爣棰榹浣嶇疆锛氱浉瀵癸紱椤堕儴锛?3em锛泒鏄笉鏄湁鐐瑰鎬紵瀹為檯涓婏紝2琛岀殑璺濈鍚戜笂绉诲姩锛岃繖鏍峰綋鏂囨湰A鍙湁涓€琛屾椂锛屾枃鏈珺鍙槸鈥滆秺鐣屸€濓紱褰撴枃鏈珹鏈夊琛屾椂锛屽洜涓洪珮搴﹀彧鏈?琛岋紝鏂囨湰B鍙槸鈥滆秺鐣屸€濊鐩栧湪鏈€涓婇潰锛屽師鐞嗗涓嬫鏃讹紝濡傛灉鐖剁骇鐨勯珮搴﹁闄愬埗鍦ㄤ竴琛?鏂囨湰B琚埅鏂垚涓€琛屻€倃rap{line-height:1.5;height:1.5em;}.title{position:relative;top:-3em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}杩欐牱褰撳琛屾椂锛岃閲庝腑鐪嬪埌鐨勬槸鏂囧瓧B锛屾晥鏋滃涓嬫渶鍚庣埗绾ц秴鍑篽idden锛岃缃儗鏅篃瓒冲浜嗘妸鏂囨湰B鏀规垚鍜岀埗绾т竴鏍风殑棰滆壊~鑷虫锛屾枃绔犲紑澶寸殑鏁堟灉灏卞疄鐜颁簡锛屽畬鏁翠唬鐮佸彲浠ュ湪codepenautotitle涓煡鐪嬶紙璁板緱鎶婇紶鏍囨斁鍦╫涓妦锛変簡瑙ｆ洿澶氭柟渚跨洿瑙傜殑婕旂ず锛岃繖閲屾湁涓€涓拰涓嬮潰鍦ㄧ嚎渚嬪瓙绫讳技鐨勫垪琛紝鍙互璁块棶codepen鑷姩鏍囬鍒楄〃锛堣寰楁妸榧犳爣鏀惧湪o~涓婏級3.鍏朵粬瀹炵敤妗堜緥涓嬮潰浠嬬粛涓や釜姣旇緝瀹炵敤鐨勬彁绀烘晥鏋溿€傚彂鐜板綋鏂囩珷寮€澶寸殑鏂囧瓧瓒呭嚭鏃讹紝鐪佺暐鍙峰湪涓棿銆傝繖绉嶈璁℃湁浠€涔堝ソ澶勶紵姣斿鏈夋椂鍊欏緢澶氭枃浠跺悓鍚嶏紝鍙槸鍚庣紑涓嶅悓锛屾垨鑰呭緢澶氶兘鏈夌増鏈彿锛屾瘮濡傦細瀹藉害灏忕殑鏃跺€欙紝鏈熬鍑虹幇鐪佺暐鍙凤紝寰堝按灏紝鍥犱负鍓嶉潰涓€鏍风殑锛屼箥涓€鐪嬪ソ鍍忓畬鍏ㄥ垎涓嶆竻鍝釜鏂囦欢鍚嶆潵鑷摢涓?馃樀)銆傚鏋滅渷鐣ュ彿鍦ㄤ腑闂达紝灏卞緢瀹规槗鍖哄垎銆傞偅涔堬紝濡備綍瀹炵幇杩欑鏁堟灉鍛紵鍊熷姪涓婇潰鐨勫竷灞€锛屼笅闈㈢殑鎵€鏈夊垎鏋愬彧闇€瑕佸鐞嗘枃鏈珺銆傚叧浜庝腑闂寸渷鐣ュ彿鐨勬晥鏋滐紝娌℃湁涓撻棬鐨凜SS鏍峰紡鏉ュ疄鐜帮紝涓嶈繃鍙互妯℃嫙涓€涓嬶紝鐒跺悗寰€涓嬬湅棣栧厛锛屽鍒朵竴娈垫枃瀛楋紝杩欓噷浣跨敤浜?:before浼被锛岄€氳繃content鐢熸垚鍐呭銆倀itle::before{content:attr(title);}寰堟槑鏄撅紝姝ゆ椂涓ゆ鏂囧瓧鏄繛鍦ㄤ竴璧风殑銆傜劧鍚庯紝涓?before璁剧疆鍙充晶娴姩锛屽苟灏嗗搴﹁缃负50%銆倀itle::before{content:attr(title);瀹藉害锛?0%锛沠loat:right;}鎺ヤ笅鏉ワ紝涓?before.title::before{/**/white-space:nowrap;璁剧疆婧㈠嚭鎴柇锛涙孩鍑猴細闅愯棌锛泃ext-overflow:ellipsis;}鏈€鍚庯紝灏?before鏇挎崲涓轰箣鍓嶇殑ellipsis鍗冲彲杈惧埌甯︽柟鍚戠殑鏁堟灉銆傚叧浜庢柟鍚戯紝浣犲钩鏃跺彲鑳芥帴瑙︿笉澶氥€傚叾瀹炲氨鏄敼鍙樻帓鐗堟柟鍚戙€傞粯璁ゆ槸浠庡乏鍒板彸锛岀渷鐣ュ彿鍦ㄥ彸杈广€傚鏋滀粠鍙虫敼涓哄乏锛岀渷鐣ュ彿涔熶細鍦ㄥ乏杈广€傛墍浠?title::before{/**/direction:rtl;/*浠庡彸鍒板乏*/}鐜板湪鐪嬬湅瀹屾垚鐨勬晥鏋溿€傛湁涓皬闂锛屼腑闂寸渷鐣ュ彿宸﹁竟鐨勭┖鏍兼湁鏃跺€欐湁鐐瑰ぇ锛屼笅闈㈡槸鍥犱负杩欎釜鍦版柟鍒氭崲浜嗕竴琛岋紝鐣欎簡涓€鐐圭┖鏍笺€傚湪杩欓噷锛屾偍鍙互閫氳繃瀵归綈鏂囨湰鐨勪袱绔潵绠€鍗曞湴浼樺寲瀹冦€倀itle{/**/text-align:justify;}杩欐牱浼氫繚璇佹渶鍙宠竟鐨勬枃瀛楁槸闈犲彸鐨勶紙褰撶劧鏂囧瓧涔嬮棿鐨勯棿璺濅細绋嶅井鍔犲ぇ~锛夛紝鏁堟灉濡備笅鍦ㄧ嚎渚嬪瓙鍗冲彲accesscodepenauto涓棿鐪佺暐鍙凤紙璁板緱鎶婇紶鏍囨斁鍦╫~涓婏級銆傛湁鏃讹紝鏍囬鎻愮ず鍙兘鏈夌偣寮憋紝涓嶅鏄庢樉銆傚綋浜у搧瑕佹眰鏂囧瓧瓒呭嚭婊氬姩鏁堟灉鏃讹紝榧犳爣鏀惧湪涓婇潰浼氳嚜鍔ㄦ粴鍔紝绫讳技杩欑鏁堟灉鎬庝箞鏍凤紵鍏跺疄鍊熷姪涓婇潰鐨勫竷灞€锛岃繖閲屽疄鐜拌捣鏉ヨ繕鏄潪甯稿鏄撶殑銆傚彧闇€瑕佸TextB鍋氭粴鍔ㄥ姩鐢诲嵆鍙€傚叧浜嶤SS3瀹炵幇鏃犵紳婊氬姩锛岃繖閲屼粙缁嶄竴涓嬪疄鐜版柟寮忥細瑕佸疄鐜颁粠澶村埌灏剧殑鏃犵紳婊氬姩锛岄鍏堥渶瑕佸鍒朵竴浠界浉鍚岀殑鏂囨湰锛岃繖閲屼娇鐢?:after浼厓绱犻€氳繃content.title::after{content:attr(data-title);/*澶嶅埗涓€浠芥枃鏈紝涓嬪浘缁胯壊閮ㄥ垎*/}鐜板湪闇€瑕佽鏄剧ず鍦ㄤ竴琛屼腑锛岃€屼笉鏄疦ewline.title{/**/white-space:nowrap;}鍙互鐪嬪埌铏界劧娌℃湁鎹㈣锛屼絾鏄搴︿粛鐒舵槸鐖剁骇鐨勫搴︼紝涓嶈窡闅忔枃鏈唴瀹广€傝繖鏃跺€欏彲浠ヨ缃甦isplay:inline-block.title{/**/display:inline-block;white-space:nowrap;}鑷充簬鏂囨湰鍐呭鍚庨潰鐨勫搴︼紝鍏跺疄鍙互鐢╳idth:max-content鏉ュ疄鐜帮紝鍏煎鎬х◢宸€倀itle{/*鏄剧ず锛氬唴鑱斿潡锛涚┖鐧斤細nowrap锛?/width:max-content;}鐒跺悗锛屽彧瑕佽缃姩鐢诲姩鐢伙紝鍙渶瑕佸湪transform浣嶇Щ鍒拌嚜韬竴鍗婄殑50%鏃跺揩閫熷洖鍒颁綅缃紝鍗冲彲瀹炵幇鏃犵紳琛旀帴鏁堟灉锛屽涓嬨€倀itle:hover{/**/animation:move10s.3slinearinfinite;}@keyframesmove{to{transform:translateX(-50%);}/*shift鍒?0%骞跺揩閫熷洖鍒颁綅缃?/}}杩欓噷鏄紑濮嬪拰缁撴潫涔嬮棿鐨勭┖闅欏畠鏄敤padding.title::after{content:a瀹炵幇鐨則tr锛堟暟鎹爣棰橈級锛沺adding:05em;/*鏃犵紳婊氬姩鐨勭涓€涓棿闅?/}缃戜笂鐨勪緥瀛愬彲浠ヨ闂甤odepen鑷姩婊氬姩鍒楄〃锛堣寰楁妸榧犳爣鏀惧湪o涓妦锛夊敮涓€鐨勭己闄锋槸鍔ㄧ敾鏃堕棿鏄浐瀹氱殑锛屽鏋滄枃瀛楀緢闀匡紝鍙兘浼氬嚭鐜版粴鍔ㄨ繃蹇殑闂銆?.鎬荤粨涓庤В閲婃湰鏂囦粙缁嶄簡CSS鑷姩鍒ゆ柇澶氳鏂囨湰鐨勬柊鎬濊矾锛屽苟甯︽潵浜?涓汉鎬у寲鐨勫皬浜や簰銆傛€荤殑鏉ヨ锛屾棤鐢ㄧ殑鎶€宸уお澶氫簡锛堜富瑕佹槸鎯宠薄鍔涳級锛岀粨鏋勪篃涓嶈澶鏉傘€傜浉淇′竴姝ユ鐪嬩笅鍘讳笉浼氬緢闅俱€傞噸鐐硅繕鏄湪涓婇潰鐨勫竷灞€閮ㄥ垎銆傚竷灞€鍑烘潵鍚庯紝涓嬮潰鐨勫緢澶氭墿灞曟晥鏋滃氨瑙ｅ喅浜嗐€傜敱浜庡彧浣跨敤浜咰SS2鐩稿叧鐨勭壒鎬э紙max-height銆乼exttruncation绛夛級锛屾墍浠ュ吋瀹规€т篃寰堝ソ銆傚疄闄呮祴璇曞彲浠ュ吋瀹笽E7+锛堝畬鍏ㄥ吋瀹癸紝鏀惧績浣跨敤锛夛紝鍚庣画婊氬姩鏁堟灉鍏煎IE10+銆傜幇鍦ㄦ€荤粨涓€涓嬪疄鐜拌鐐癸細鎹釜鎬濊矾锛屽鍒惰妭鐐规槸涓ソ鍔炴硶鍒╃敤max-height鐏垫椿鍒ゆ柇鍗曡鍜屽琛屼娇鐢╟sscover-up鍜宐eyondhidden鏂瑰悜锛歳tl鍙互瀹炵幇鍓嶉潰鐪佺暐鍙风殑鏁堟灉涓棿鐨勭渷鐣ュ彿鍙互鐢变袱娈垫枃瀛楁嫾鎺ユā鎷熷搴﹁窡闅忔枃瀛楅€傞厤銆傛偍鍙互浣跨敤inline-block鏉ュ疄鐜版棤缂濇粴鍔ㄦ晥鏋溿€傛偍鍙互浣跨敤浣嶇Щ-50%鏉ュ疄鐜板畠銆傝繖涔堜綆鎴愭湰鍙堥潪甯镐汉鎬у寲鐨勫皬鍔熻兘锛岃刀绱х敤璧锋潵鍚с€傝寰椾笉閿欑殑璇濇杩庣偣璧炪€佹敹钘忋€佽浆鍙戔潳鉂も潳~
