鍦╩ac鏂囦欢绠＄悊涓湁杩欎箞涓€涓皬缁嗚妭銆傚綋鏂囦欢鍚嶄笉瓒呰繃涓€琛屾椂锛屽皢瀹屾暣鏄剧ず銆傝繖鏃跺€欓紶鏍囨斁鍦ㄤ笂闈㈡槸娌℃湁鎻愮ず鐨勩€傚綋鏂囦欢鍚嶈秴杩囦竴琛屾椂锛屼細鍑虹幇涓€涓渷鐣ュ彿銆傝繖鏃跺€欓紶鏍囨斁鍦ㄦ彁绀轰笂浼氭樉绀哄畬鏁寸殑鏂囦欢鍚嶃€俰mageimg鏄竴涓潪甯稿井濡欎絾闈炲父浜烘€у寲鐨勭粏鑺傘€傦紙ps.濡傛灉鑳藉畬鏁寸湅鍒板氨涓嶇敤鎻愮ず浜嗮煒橈級銆傚叾瀹炶繖绉嶆晥鏋滃湪web涓婇€氳繃绠€鍗曠殑CSS灏卞彲浠ヨ交鏉惧疄鐜般€備笅闈竴璧锋潵鐪嬬湅鍚1.CSS瀹炵幇鎬濊矾title灞炴€х浉淇″ぇ瀹堕兘鐭ラ亾锛屽畠鏄敤鏉ュ仛鍘熺敓鎻愮ず鐨勩€傚彲浠ヨ鏄嚜鍙や互鏉ュ氨寰楀埌浜嗘敮鎸併€備笅闈㈡槸MDN[1]涓婂璇ュ睘鎬х殑浠嬬粛title鍏ㄥ眬灞炴€2]鍖呭惈琛ㄧず鍜ㄨ淇℃伅鐨勬枃鏈紝鐩稿浜庡畠鎵€灞炵殑鍏冪礌銆傝繖浜涗俊鎭€氬父瀛樺湪锛屼絾浠庢潵閮戒笉鏄繀闇€鐨勶紝浣滀负鎻愰啋鏄剧ず缁欑敤鎴烽潪甯哥畝鍗曘€?pclass="txt"title="Thisisabsolute">璇ュ厓绱犲皢琚Щ鍑烘甯哥殑鏂囨。娴侊紝骞朵笖涓嶄細涓鸿鍏冪礌淇濈暀浠讳綍绌洪棿锛屽畠閫氳繃鎸囧畾鍏冪礌鐩稿浜庢渶杩戦潪鍏冪礌鐨勫亸绉婚噺鏉ョ‘瀹氳鍏冪礌鐨勪綅缃?static瀹氫綅鐨勭鍏堝厓绱犮€傜粷瀵瑰畾浣嶇殑鍏冪礌鍙互鍦ㄤ笉涓庡叾浠栬竟璺濆悎骞剁殑鎯呭喌涓嬭缃竟璺濄€?/p>鍥剧墖img涓澶勬爣棰樼殑鍛堢幇鏂瑰紡鍜屽仠鐣欐椂闂翠笌鎿嶄綔绯荤粺鍜屾祻瑙堝櫒鏈夊叧锛屼笉鍙慨鏀广€傜幇鍦ㄧ殑闂鏄痶itle灞炴€ф槸棰勫姞鐨勶紝鏃犳硶閫氳繃style鎺у埗鏄惁鏄剧ず銆傞偅涔堬紝CSS鏄浣曞仛鍒板姩鎬佺殑鍛紵铏界劧css涓嶈兘鍔ㄦ€佹敼鍙榯itle灞炴€э紝浣嗘槸鎹釜鎬濊矾锛屽鏋滄湁涓や釜鐩稿悓鐨勬枃鏈紝鍏朵腑涓€涓湁title灞炴€э紝姣斿鍏冪礌灏变細绉诲嚭姝ｅ父鏂囨。娴侊紝涓嶄负鍏冪礌淇濈暀鍏冪礌灏嗕粠姝ｅ父鏂囨。娴佷腑绉诲嚭,andNotreservedforelements
涓轰簡婕旂ず鏂逛究锛岀粰甯︽湁title灞炴€х殑鏂囨湰娣诲姞鑳屾櫙鑹诧紝鐒跺悗鏆備笖绉颁箣涓篢extA鍜孴extB锛堜互涓嬮€傜敤锛夛紝濡傚浘img鎵€绀虹幇鍦ㄦ垜浠彧闇€瑕佹帶鍒舵枃鏈珹鍦ㄥ崟琛屾枃鏈椂鐨勬樉绀猴紝鏂囨湰B鍦ㄥ琛屾枃鏈椂鐨勬樉绀猴紝灏卞彲浠ュ疄鐜版垜浠兂瑕佺殑鍔熻兘浜嗐€傞偅涔堬紝濡備綍鍒ゆ柇鏂囨湰鏄惁瓒呰繃涓€琛屽憿锛?銆佸琛屾枃瀛楃殑鍒ゆ柇棣栧厛锛屽綋鏂囧瓧瓒呰繃涓€琛屾椂锛岄珮搴﹀繀鐒朵細鍙戠敓鍙樺寲锛堭煒傦級銆傚亣璁捐楂樻槸1.5锛岄偅涔?琛屾枃瀛楁槸1.5em锛?琛屾槸3em锛屼互姝ょ被鎺ㄢ€︹€︿絾鏄鏋滄垜浠妸鏂囧瓧A鐨勬渶澶ч珮搴﹂檺鍒朵负涓よ锛岄偅涔堜竴琛屽拰澶氳鏄湁鍖哄埆鐨勶紙鍗曡楂樺害涓?.5em锛屽琛岄珮搴︿负3em锛?txt{display:block;max-height:3em;/max楂樺害涓?琛?}鐜板湪鍏抽敭涓€姝ユ槸灏嗘枃瀛桞鍚戜笂绉诲姩2琛岋紝杩欓噷鍙互閫氳繃鐩稿瀹氫綅瀹炵幇锛坢argin涔熷彲浠ワ級銆傛爣棰榹浣嶇疆锛氱浉瀵癸紱椤堕儴锛?3em锛泒鍥剧墖img鏄笉鏄湁鐐瑰鎬紵瀹為檯涓婏紝瀹冨悜涓婄Щ鍔ㄤ簡2琛岋紝杩欐牱褰撴枃鏈珹鍙湁涓€琛屾椂锛屾枃鏈珺鍙槸鈥滆秺鐣屸€濓紱褰撴枃鏈珹鏈夊琛屾椂锛屾枃鏈珺姝ｅソ鈥滆鐩栤€濆湪涓婇潰锛屽師鐞嗗涓婭mageimg姝ゆ椂锛屽鏋滅埗绾х殑楂樺害闄愬埗鍦ㄤ竴琛岋紝鏂囨湰B琚埅鏂负鍗曡銆倃rap{line-height:1.5;height:1.5em;}.title{position:relative;top:-3em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}杩欐牱锛屽綋鏈夊琛岋紝浣犲湪瑙嗛噹涓湅鍒扮殑鏄枃瀛桞銆傛晥鏋滃涓嬨€傚浘鐗噄mg鐖剁骇缁堜簬闅愯棌浜嗭紝杩樻湁鏂囧瓧B鎶婅儗鏅缃垚鍜岀埗绾т竴鏍风殑棰滆壊灏辫浜唦鍥剧墖img鍒版缁撴潫锛屽疄鐜颁簡鏂囩珷寮€澶存墍绀虹殑鏁堟灉銆傚畬鏁寸殑浠ｇ爜鍙互鏌ョ湅codepenautotitle[3]锛堣寰楁妸榧犳爣鏀惧湪o~锛夋洿鏂逛究鐩磋杩欓噷鏈変竴涓被浼间簬鍥剧墖img鍦ㄧ嚎渚嬪瓙鐨勫垪琛紝鍙互璁块棶codepenautotitlelist[4]锛堣寰楁妸榧犳爣鏀惧湪o~锛変笁銆佸叾浠栧疄鐢ㄦ渚嬫帴涓嬫潵浠嬬粛涓や釜姣旇緝瀹炵敤鐨勬彁绀烘晥鏋滐紝鐪佺暐涓棿鐨勬晥鏋滅粏蹇冪殑鏈嬪弸鍙兘鍙戠幇浜嗭紝褰撳紑澶寸殑鏂囧瓧鏂囩珷瓒呭嚭锛岀渷鐣ュ彿鍦ㄤ腑闂淬€傝繖绉嶈璁℃湁浠€涔堝ソ澶勶紵姣斿鏈夋椂鍊欏緢澶氭枃浠剁殑鍚嶅瓧閮戒竴鏍凤紝鍙槸鍚庣紑涓嶅悓锛屾垨鑰呭緢澶氶兘鏈夌増鏈彿锛屾瘮濡傦細鍥剧墖img瀹藉害灏忕殑鏃跺€欙紝鏈熬鍑虹幇鐪佺暐鍙凤紝寰堝按灏紝鍥犱负鍓嶉潰閮芥槸涓€鏍风殑锛屼箥涓€鐪嬪ソ鍍忓垎涓嶆竻鍝釜鏂囦欢鍚嶆潵鑷摢涓?馃樀)鍥剧墖img銆傚鏋滅渷鐣ュ彿鍦ㄤ腑闂达紝灏卞緢瀹规槗鍖哄垎銆傞偅涔堬紝濡備綍瀹炵幇杩欑鏁堟灉鍛紵鍊熷姪涓婇潰鐨勫竷灞€锛屼笅闈㈢殑鎵€鏈夊垎鏋愬彧闇€瑕佸鏂囨湰B杩涜澶勭悊鍗冲彲銆傚叧浜庣渷鐣ュ彿鏁堟灉锛屾病鏈変笓闂ㄧ殑CSS鏍峰紡鏉ュ疄鐜帮紝浣嗘槸鍙互妯℃嫙涓€涓嬶紝鎺ョ潃寰€涓嬬湅锛岄鍏堝鍒朵竴娈垫枃瀛楋紝杩欓噷浣跨敤浜?:before浼厓绱狅紝閫氳繃content.title::before{content:attr(title);}鐢熸垚锛屾樉鐒讹紝姝ゆ椂鐨勪袱娈垫枃瀛楀氨鏄繛鍦ㄤ竴璧风殑鍥剧墖img銆傜劧鍚庯紝涓?before璁剧疆鍙虫诞鍔紝璁剧疆瀹藉害涓?0%.title::before{content:attr(title);width:50%;float:right;}Imageimg鎺ヤ笅鏉ワ紝璁剧疆婧㈠嚭鎴柇涓猴細before.title::before{/**/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}Imageimg鏈€鍚庢斁锛氱敤direction鍙互瀹炵幇鎶奲efore鏇挎崲鎴愬墠闈㈢殑鐪佺暐鍙风殑鏁堟灉銆傚叧浜巇irection[5]锛屾垜骞虫椂鎺ヨЕ鐨勫彲鑳戒笉澶氥€傚叾瀹炲氨鏄敼鍙樻帓鐗堟柟鍚戙€傞粯璁ゆ槸浠庡乏鍒板彸锛岀渷鐣ュ彿鍦ㄥ彸杈广€傚鏋滀粠鍙虫敼鎴愬乏锛岄偅涔堢渷鐣ュ彿涔熶細鍦ㄥ乏杈癸紝鎵€浠?title::before{/**/direction:rtl;/*浠庡彸鍒板乏*/}Imageimg涓嬮潰鏉ョ湅鐪嬪畬鎴愬悗鐨勬晥鏋溿€俰mageimg杩樻槸鏈夌偣闂锛屼腑闂寸渷鐣ュ彿宸﹁竟鐨勭┖鏍兼湁鏃舵湁鐐瑰ぇ锛屽涓嬪浘img锛屽洜涓鸿繖涓湴鏂瑰彧鏄崲浜嗕竴涓柊琛岋紝鎵€浠ョ┖鏍兼湁鐐瑰皬銆傚湪杩欓噷锛屾偍鍙互閫氳繃瀵归綈鏂囨湰鐨勪袱绔潵绠€鍗曞湴浼樺寲瀹冦€倀itle{/**/text-align:justify;}杩欐牱浼氫繚璇佹渶鍙宠竟鐨勬枃瀛楅潬鍙筹紙褰撶劧鏂囧瓧涔嬮棿鐨勯棿璺濅細绋嶅井鍔犲ぇ~锛夛紝鏁堟灉濡備笅鍥緄mgonlineexample鍙互璁块棶codepenautomiddleellipsis[6]锛堣寰楁妸榧犳爣鏀惧湪o~锛夎秴鍑烘粴鍔ㄦ晥鏋溿€傛湁鏃讹紝鏍囬鎻愮ず鍙兘鏈夌偣寮憋紝涓嶅鏄庢樉銆傚綋浜у搧闇€瑕佹枃瀛楄秴鍑烘椂锛岄紶鏍囧彲浠ヨ嚜鍔ㄥ悜涓婃粴鍔紝杩欐牱鐨勬晥鏋滃浘img濡備綍瀹炵幇锛熷叾瀹炴湁浜嗕笂闈㈢殑甯冨眬锛岃繖閲岀殑瀹炵幇灏卞緢瀹规槗浜嗐€傚彧闇€瑕佸鏂囧瓧B鍋氭粴鍔ㄥ姩鐢诲嵆鍙€傚叧浜嶤SS3瀹炵幇鏃犵紳婊氬姩锛岃繖閲屼粙缁嶄竴涓嬪疄鐜版柟寮忥細瑕佸疄鐜颁粠澶村埌灏剧殑鏃犵紳婊氬姩锛岄鍏堥渶瑕佸鍒剁浉鍚岀殑鏂囧瓧锛岃繖閲屼娇鐢?:after浼厓绱犻€氳繃content.title::after{content:attr(data-title);/*澶嶅埗涓€浠芥枃鏈紝涓嬪浘涓豢鑹查儴鍒?/}鍥剧墖image.png鐜板湪闇€瑕佸湪涓€琛屼腑鏄剧ず鑰屼笉鎹㈣銆倀itle{/**/white-space:nowrap;}鍙互鐪嬪埌鍥剧墖img锛岃櫧鐒舵病鏈夋崲琛岋紝浣嗘槸瀹藉害杩樻槸鐖剁骇鐨勫搴︼紝涓嶈窡闅忔枃瀛楀唴瀹广€傝繖鏃跺€欏彲浠ヨ缃樉绀猴細inline-block.title{/**/display:inline-block;white-space:nowrap;}鍥剧墖img鐨勫搴﹁窡闅忔枃瀛楀唴瀹箏鑷充簬瀹藉害璺熼殢text鍐呭锛屽叾瀹炲彲浠ョ敤width:max-content[7]瀹炵幇锛屽吋瀹规€х◢宸€倀itle{/*display:inline-block;white-space:nowrap;*/width:max-content;}鏈€鍚庤缃產nimation鍔ㄧ敾锛屽彧鏈夊綋transform浣嶇Щ鍒拌嚜韬殑涓€鍗婃椂鎵嶅揩閫熷洖鍒?0%鐨勪綅缃埌瀹炵幇鏃犵紳杩囨浮锛屽涓嬨€倀itle:hover{/**/animation:move10s.3slinearinfinite;}@keyframesmove{to{transform:translateX(-50%);/*骞崇Щ鍒?0%鏃讹紝蹇€熻繑鍥?/}}杩欓噷鍥剧墖img棣栧熬涔嬮棿鐨勭┖闅欐槸閫氳繃padding瀹炵幇鐨勩€傛爣棰?:涔嬪悗{鍐呭锛氬湪tr(data-title);padding:05em;/*鏃犵紳婊氬姩鐨勭涓€涓棿闅?/}缃戜笂鐨勪緥瀛愬彲浠ヨ闂甤odepen鑷姩婊氬姩鍒楄〃[8]锛堣寰楁妸榧犳爣鏀惧湪o涓妦锛夊敮涓€鐨勭己闄锋槸閭ｄ釜鍔ㄧ敾鏃堕棿鏄浐瀹氱殑锛屽鏋滄枃瀛楀緢闀匡紝鍙兘浼氬嚭鐜版粴鍔ㄨ繃蹇殑闂銆?.鎬荤粨涓庤В閲婃湰鏂囦粙缁嶄簡CSS鑷姩鍒ゆ柇澶氳鏂囨湰鐨勬柊鎬濊矾锛屽苟甯︽潵浜?涓汉鎬у寲鐨勫皬浜や簰銆傛€荤殑鏉ヨ锛屽叾瀹炴垜骞舵病鏈夌敤鍒板お澶氱殑鎶€宸э紙涓昏鏄兂鍍忥級锛岀粨鏋勪篃涓嶆槸澶鏉傘€傜浉淇′竴姝ユ鐪嬩笅鍘讳笉浼氬緢闅俱€傞噸鐐硅繕鏄湪涓婇潰鐨凩ayout閮ㄥ垎銆傚竷灞€鍑烘潵鍚庯紝涓嬮潰鐨勫緢澶氭墿灞曟晥鏋滃氨瑙ｅ喅浜嗐€傜敱浜庡彧浣跨敤浜咰SS2鐩稿叧鐨勭壒鎬э紙max-height銆乼exttruncation绛夛級锛屾墍浠ュ吋瀹规€т篃寰堝ソ銆傚疄闄呮祴璇曞彲浠ュ吋瀹笽E7+锛堝畬鍏ㄥ吋瀹癸紝鏀惧績浣跨敤锛夛紝鍚庣画婊氬姩鏁堟灉鍏煎IE10+銆傜幇鍦ㄦ€荤粨涓€涓嬪疄鐜拌鐐癸細鎹釜鎬濊矾锛屽鍒惰妭鐐规槸涓ソ鍔炴硶鍒╃敤max-height鍒ゆ柇鍗曡澶氳鐏垫椿浣跨敤csscover-up鍜宐eyondhiddendirection:rtl鍙互杈惧埌pre-鐨勬晥鏋渆llipsis涓棿鐨勭渷鐣ュ彿鍙互鐢变袱娈垫枃瀛楁嫾鎺ユā鎷熷搴﹁窡闅忔枃瀛楅€傞厤銆傚彲浠ヤ娇鐢╥nline-block瀹炵幇鏃犵紳婊氬姩鏁堟灉锛屼綅绉?50%鍗冲彲瀹炵幇銆傝繖涔堜綆鎴愭湰鍙堥潪甯镐汉鎬у寲鐨勫皬鍔熻兘锛岃刀绱х敤璧锋潵鍚с€傚鏋滆寰椾笉閿欙紝娆㈣繋鐐硅禐銆佹敹钘忋€佽浆鍙戔潳鉂も潳~鍙傝€僛1]https://developer.mozilla.org...[2]https://developer.mozilla.org...[3]https://codepen.io/xboxyan/pe...[4]https://codepen.io/xboxyan/pe...[5]https://www.zhangxinxu.com/wo...[6]https://codepen.io/xboxyan/pe...[7]https://www.zhangxinxu.com/wo...[8]https://codepen.io/xboxyan/pe...
