CSS 數學函式與容器查詢實現不定寬文字溢位跑馬燈效果

chokcoco發表於2023-03-02

在許久之前,曾經寫過這樣一篇文章 -- 不定寬溢位文字適配滾動。我們實現了這樣一種效果:

  1. 文字內容不超過容器寬度,正常展示
  2. 文字內容超過容器的情況,內容可以進行跑馬燈來回滾動展示

像是這樣:

但是,之前的方案,有一個很明顯的缺點,如果我們事先知道了容器的寬度,那麼沒問題,但是如果沒法確定容器的寬度,也就文字寬度不確定,容器寬度也不確定的話,那麼整個效果會有一點瑕疵

瑕疵在於,當時的 CSS 技術,其實沒法判斷當前文字內容長度是否超過了其容器寬度,導致即便文字沒有沒有超長,Hover 上去也會進行一個來回滾動,像是這樣:

容器查詢 cqw 和 CSS 數學函式 max

背景描述大概是這樣,感興趣的同學,可以簡單翻看一下上午提到的文章 -- 不定寬溢位文字適配滾動

到今天,我們重新審視這個問題。看看到今天,我們可以如何更加簡單便捷的解決這個問題!

首先,我們的問題其實可以抽象成:

  1. 判斷文字寬度與容器寬度的大小差異,文字寬度是否大於容器寬度
  2. 如果超出,則設定來回位移動畫,位移的幅度為容器寬度與文字寬度的差值

那麼,我們一步一步來。

假設我們的 HTML 結構如下:

<div class="marquee">
	<span>Lorem ipsum dolor sit amet elit. Animi, aliquid.<span>
</div>

其中,div 為容器,span 為文字內容。同時,我們利用容器查詢,設定父容器 marquee 為容器查詢的容器,並且將基於容器的inline-size 維度。

.marquee {
	white-space: nowrap;
	container-type: inline-size;
}

繼續,我們如何能夠在 span 中得知,當前 span 的內容長度與父容器寬度誰比較大呢?

在之前,這是很難辦到的,但是現在,我們有了 容器查詢 後,可以靠容器查詢單位 cqw 完成。

首先,什麼是容器查詢?容器查詢它給予了 CSS,在不改變瀏覽器視口寬度的前提下,只是根據容器的寬度變化,對佈局做成調整的能力。

對容器查詢想了解更多的,可以戳:新時代佈局新特性 -- 容器查詢

容器查詢帶來了很多新的單位,其中有:

  • cqw 容器查詢寬度(Container Query Width)佔比。1cqw 等於容器寬度的 1%。假設容器寬度是 1000px,則此時 1cqw 對應的計算值就是 10px。
  • cqh 容器查詢高度(Container Query Height)佔比。1cqh 等於容器高度的 1%。
  • cqi 表示容器查詢內聯方向尺寸(Container Query Inline-Size)佔比。這個是邏輯屬性單位,預設情況下等同於 cqw
  • cqb 容器查詢塊級方向尺寸(Container Query Block-Size)佔比。同上,預設情況下等同於 cqh
  • cqmin 容器查詢較小尺寸的(Container Query Min)佔比。取 cqw 和 cqh 中較小的一個
  • cqmax 表示容器查詢較大尺寸的(Container Query Min)佔比。取 cqw 和 cqh 中較大的一個

本文,我們會運用到其中的 cqw,1cqw 等於容器寬度的 1%。那麼,當前容器的寬度,其實就是 100 cqw。

那麼:

  1. width: 100% ,對於 span 行內元素而言,其文字長度就是其整個的寬度,100% 代表的就是文字內容的長度
  2. width: 100cqw 表示的是設定了容器查詢的 .marquee 的寬度(也就是父容器的寬度)

OK,有了 100%100cqw 怎麼比較他們誰大誰小呢?其實我們的關鍵不是誰大誰小,而是:

  1. 如果當前容器的寬度(也就是文字寬度)大於父容器寬度,需要得到一個動畫位置值
  2. 如果當前容器的寬度(也就是文字寬度)小於父容器寬度,無需動畫,也就是動畫位移值為 0

那麼,我們的核心就變成了,0 與兩個寬度差值的比較。剛好,CSS 中提供了比較大小數學函式 max()min()

關於 CSS 數學函式,你可以參考我的這篇文章 -- 現代 CSS 解決方案:CSS 數學函式

鋪墊了這麼久,最終,我們得到最為核心的一行程式碼:

max(100% - 100cqw, 0px)

當然,換一種思維,使用 min() 也是可以的:

min(100cqw - 100%, 0px)

如果 span 內容長度,大於容器寬度,也就是 100% - 100cqw 大於 0px,那麼其實也就得到了跑馬燈效果應該位移的距離。

我們順便也就將整個效果的程式碼寫完了,完整的程式碼:

.marquee {
	overflow: hidden;
	white-space: nowrap;
	width: 200px;
	resize: horizontal;
	container-type: inline-size;
}
.marquee span {
      animation: marquee 3s linear infinite both alternate;
}
@keyframes marquee {
	to {
		transform: translateX(min(100cqw - 100%, 0px));
	}
}

效果如下:

這樣,到今天,我們可以輕易的實現:

  1. 文字內容不超過容器寬度,正常展示
  2. 文字內容超過容器的情況,內容可以進行跑馬燈來回滾動展示

也就是如下的效果:

完整的程式碼,你可以戳這裡:Pure CSS Marquee

當然,硬要說的話,本方案還是存在一個缺陷,就是動畫的時長是固定的,沒法根據內容的長短響應式的進行適配。可能更適合文字內容相差不大的場景使用。

最後

本案例 DEMO 由日服第一切圖仔佐子哥傾情貢獻。好了,本文到此結束,希望本文對你有所幫助 ?

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

相關文章