在許久之前，曾經寫過這樣一篇文章 -- 不定寬溢位文本適配滾動，我們實作了這樣一種效果：
- 文本內容不超過容器寬度，正常展示
- 文本內容超過容器的情況，內容可以進行跑馬燈來回滾動展示
像是這樣：
但是，之前的方案，有一個很明顯的缺點，如果我們事先知道了容器的寬度，那么沒問題，但是如果沒法確定容器的寬度，也就文本寬度不確定，容器寬度也不確定的話，那么整個效果會有一點瑕疵，
瑕疵在于，當時的 CSS 技術，其實沒法判斷當前文本內容長度是否超過了其容器寬度，導致即便文本沒有沒有超長，Hover 上去也會進行一個來回滾動，像是這樣：
容器查詢 cqw 和 CSS 數學函式 max
背景描述大概是這樣，感興趣的同學，可以簡單翻看一下上午提到的文章 -- 不定寬溢位文本適配滾動，
到今天，我們重新審視這個問題，看看到今天，我們可以如何更加簡單便捷的解決這個問題！
首先，我們的問題其實可以抽象成：
- 判斷文本寬度與容器寬度的大小差異，文本寬度是否大于容器寬度
- 如果超出，則設定來回位移影片，位移的幅度為容器寬度與文本寬度的差值
那么，我們一步一步來，
假設我們的 HTML 結構如下：
<div >
<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，
那么：
width: 100%，對于 span 行內元素而言，其文本長度就是其整個的寬度，100% 代表的就是文本內容的長度width: 100cqw表示的是設定了容器查詢的.marquee的寬度（也就是父容器的寬度）
OK，有了 100% 和 100cqw 怎么比較他們誰大誰小呢？其實我們的關鍵不是誰大誰小，而是：
- 如果當前容器的寬度（也就是文本寬度）大于父容器寬度，需要得到一個影片位置值
- 如果當前容器的寬度（也就是文本寬度）小于父容器寬度，無需影片，也就是影片位移值為 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));
}
}
效果如下：
這樣，到今天，我們可以輕易的實作：
- 文本內容不超過容器寬度，正常展示
- 文本內容超過容器的情況，內容可以進行跑馬燈來回滾動展示
也就是如下的效果：
完整的代碼，你可以戳這里：Pure CSS Marquee
當然，硬要說的話，本方案還是存在一個缺陷，就是影片的時長是固定的，沒法根據內容的長短回應式的進行適配，可能更適合文本內容相差不大的場景使用，
最后
本案例 DEMO 由日服第一切圖仔佐子哥傾情貢獻，好了，本文到此結束，希望本文對你有所幫助 ??
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545598.html
標籤：Html/Css
下一篇：003. html篇之《表單》