CSS数学函数和容器查询实现不定宽文本溢出的跑马灯效果

鍏朵腑div鏄鍣紝span鏄枃鏈唴瀹广€傚悓鏃舵垜浠娇鐢ㄥ鍣ㄦ煡璇㈠皢鐖跺鍣ㄨ窇椹伅璁剧疆涓哄鍣ㄦ煡璇㈢殑瀹瑰櫒锛屼細浠ュ鍣ㄧ殑inline-size缁村害涓哄噯銆?marquee{绌虹櫧锛歯owrap;container-type:inline-size;}缁х画锛屾垜浠浣曠煡閬撳湪鏇村ぇ鐨剆pan涓紝褰撳墠span鐨勫唴瀹归暱搴︽垨鐖跺鍣ㄧ殑瀹藉害锛熶互鍓嶅緢闅惧仛鍒帮紝鐜板湪鎴戜滑鏈変簡瀹瑰櫒鏌ヨ涔嬪悗锛屽鍣ㄦ煡璇㈠崟鍏僣qw灏卞彲浠ュ仛鍒般€備竴銆佷粈涔堟槸瀹瑰櫒鏌ヨ锛熷鍣ㄦ煡璇娇CSS鑳藉鏍规嵁瀹瑰櫒鐨勫搴﹁皟鏁村竷灞€锛岃€屾棤闇€鏀瑰彉娴忚鍣ㄨ鍙ｇ殑瀹藉害銆傚鏋滄兂浜嗚В鏇村瀹瑰櫒鏌ヨ锛屽彲浠ョ偣鍑伙細鏂版椂浠ｅ竷灞€鏂扮壒鎬р€斺€斿鍣ㄦ煡璇㈠鍣ㄦ煡璇㈠甫鏉ヤ簡寰堝鏂扮殑鍗曚綅锛屽寘鎷細cqw瀹瑰櫒鏌ヨ瀹藉害锛圕ontainerQueryWidth锛夋瘮銆?cqw绛変簬瀹瑰櫒瀹藉害鐨?%銆傚亣璁惧鍣ㄥ搴︿负1000px锛屾鏃?cqw瀵瑰簲鐨勮绠楀€间负10px銆俢qh瀹瑰櫒鏌ヨ楂樺害锛圕ontainerQueryHeight锛夌殑姣斾緥銆?cqh绛変簬瀹瑰櫒楂樺害鐨?%銆俢qi琛ㄧず瀹瑰櫒鏌ヨ鍐呰仈澶у皬锛圕ontainerQueryInline-Size锛夌殑姣斾緥銆傝繖鏄€昏緫灞炴€у崟鍏冿紝榛樿鐩稿綋浜巆qwcqb瀹瑰櫒鏌ヨ鍧楃骇鏂瑰悜澶у皬锛圕ontainerQueryBlock-Size锛夌殑姣斾緥銆傚悓涓婏紝榛樿鐩稿綋浜巆qhcqmin瀹瑰櫒鏌ヨ杈冨皬灏哄锛圕ontainerQueryMin锛夌殑姣斾緥銆傚彇cqw鍜宑qh涓緝灏忕殑cqmax琛ㄧず瀹瑰櫒鏌ヨ涓緝澶у昂瀵革紙ContainerQueryMin锛夌殑姣斾緥銆傛湰鏂囧彇cqw鍜宑qh涓緝澶х殑涓€涓紝鎴戜滑灏辩敤cqw锛?cqw绛変簬瀹瑰櫒瀹藉害鐨?%銆傞偅涔堬紝褰撳墠瀹瑰櫒鐨勫搴﹀疄闄呬笂鏄?00cqw銆傞偅涔堬細width:100%锛屽浜巗pan鍐呰仈鍏冪礌锛屽畠鐨勬枃鏈暱搴﹀氨鏄畠鐨勬暣涓搴︼紝100%琛ㄧず鏂囨湰鍐呭鐨勯暱搴idth:100cqw琛ㄧず甯︽湁瀹瑰櫒鏌ヨ闆嗙殑.marquee鐨勫搴︼紙鍗筹紝鐖跺鍣ㄧ殑瀹藉害锛塐K锛?00%鍜?00cqw锛屽浣曟瘮杈冨摢涓ぇ鍝釜灏忥紵鍏跺疄鎴戜滑鐨勫叧閿笉鏄皝澶ц皝灏忥紝鑰屾槸锛氬鏋滃綋鍓嶅鍣ㄧ殑瀹藉害锛堜篃灏辨槸鏂囧瓧鐨勫搴︼級澶т簬鐖跺鍣ㄧ殑瀹藉害锛屾垜浠渶瑕佽幏鍙栦竴涓姩鐢籶ositionvalue濡傛灉褰撳墠瀹瑰櫒鐨勫搴︼紙涔熷氨鏄枃瀛楃殑瀹藉害锛夊皬浜庣埗瀹瑰櫒鐨勫搴︼紝鍒欎笉闇€瑕佸姩鐢伙紝涔熷氨鏄姩鐢讳綅绉诲€间负0銆傞偅涔堬紝鎴戜滑鐨勬牳蹇冨氨鍙樻垚浜嗘瘮杈?鍜屼袱涓搴︿箣闂寸殑宸紓銆傜宸х殑鏄紝CSS涓彁渚涗簡姣旇緝澶у皬鐨勬暟瀛﹀嚱鏁癿ax()鍜宮in()銆傚叧浜嶤SS鏁板鍑芥暟锛屽彲浠ュ弬鑰冩垜鐨勬枃绔犫€斺€擬odernCSSSolutions:CSSmathfunctions閾哄灚浜嗚繖涔堜箙锛岀粓浜庡緱鍑烘渶鏍稿績鐨勪竴琛屼唬鐮侊細max(100%-100cqw,0px)鐨勫綋鐒讹紝鎹竴绉嶆€濊矾锛屼篃鍙互浣跨敤min()锛歮in(100cqw-100%,0px)濡傛灉span鍐呭闀垮害澶т簬瀹瑰櫒瀹藉害锛屽嵆100%-100cqw澶т簬0px锛岄偅涔堝叾瀹炶窇椹伅鏁堟灉搴旇鏄綅绉昏窛绂汇€傚浜嗭紝鏁翠釜鏁堟灉鐨勪唬鐮佹垜浠凡缁忓啓瀹屼簡锛屽畬鏁翠唬鐮侊細.marquee{overflow:hidden;绌虹櫧锛歯owrap锛涘搴︼細200px锛涜皟鏁村ぇ灏忥細姘村钩锛沜ontainer-type:inline-size;}.marqueespan{animation:marquee3slinearinfinitebothalternate;}@keyframesmarquee{to{transform:translateX(min(100cqw-100%,0px));}}鏁堟灉濡備笅锛氳繖鏍凤紝鍒颁粖澶╀负姝紝鎴戜滑鍙互杞绘澗瀹炵幇锛氭枃鏈唴瀹逛笉瓒呭嚭瀹瑰櫒瀹藉害锛屾枃鏈唴瀹硅秴鍑哄鍣ㄦ甯告樉绀猴紝鍐呭鍙互鍚戝悗婊氬姩鏉ュ洖鏄剧ず濡備笅鏁堟灉锛氬畬鏁翠唬鐮侊紝鍙互鐐瑰嚮杩欓噷锛歅ureCSSMarquee褰撶劧锛屽鏋滀綘鍧氭寔鐨勮瘽锛岃繖涓柟妗堣繕鏄瓨鍦ㄧ殑涓€涓己闄锋槸鍔ㄧ敾鐨勬椂闀挎槸鍥哄畾鐨勶紝涓嶈兘鏍规嵁鍒板唴瀹圭殑闀垮害銆傚彲鑳芥洿閫傚悎鏂囨湰鍐呭鐩稿樊涓嶅ぇ鐨勫満鏅€傛渶鍚庯紝鏈渚嬬殑DEMO鐢辨棩鏈嶇涓€浠讳富浜篠ako璐＄尞銆傚ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆傛湰鏂囧弬鍔犱簡SegmentFault鎬濈淮鍐欎綔鎸戞垬璧涳紝娆㈣繋姝ｅ湪闃呰鐨勪綘鍔犲叆銆?/p>