CSS 滾屏效果，要比想象中的難

今天有一位掘友問我一個問題：

文字不換行，超出容器，怎麼滾動顯示?

好比下圖中，有的列表項的文字短，有的文字長。

需求是：但願文字長的部分能經過動畫滾動顯示。

個人第一反應是用純 CSS 作不了。

可是後來左思右想一陣子，居然作到了！

其中涉及了一些有趣 CSS 知識點，在這裏分享一下。

1. 如何讓文字溢出容器？

work-break 屬性是用來處理文字如何換行的，這裏使用了不太經常使用的值 keep-all，表示只能在半角空格或連字符處換行。由於文本里沒有這兩種特殊字符，所以文本溢出了。

2. 如何讓元素寬度隨內容而定？

指定了 width 值爲 fit-content，它是 CSS3 新的屬性值，表示寬度與內容一致。除了 fit-content 以外，還有 max-content、 min-content 和 fill-available。具體含義若有不清楚的，請 google 之。

3. 動起來？

這裏咱們使用關鍵幀動畫，使其滾動起來先。關鍵幀定義以下：

@keyframes move {
  0%{
    transform: translateX(0px);
  }
  100%{
    transform: translateX(-100%);
  }
}
複製代碼

具體效果是：

這裏能夠看出，咱們在第 2 步設置元素的寬度爲文字自身寬度的緣由是，咱們動畫移動元素是相對於自身的寬度的。

目前效果仍是比較粗糙，好比總體移動 100%，咱們但願文字尾部與 div 容器內容盒右邊卡齊：

因爲咱們知道父元素的 width 值的（這裏是 100px），使用 calc() 就能輕鬆作到：

@keyframes move {
  0%{
    transform: translateX(0px);
  }
  100%{
    transform: translateX(calc(-100% + 100px));
  }
}
複製代碼

同時再讓父元素隱藏溢出部分，效果以下：

4. 如何讓短文字不動？

整體上實現了滾動的效果，可是掘友的需求是，長文字滾動，短文字不動的。

說實話，我爲這個需求苦惱了小半天。。。

後來，直拍大腿：設置 p 的最小寬度呀！

5. 最後一步，優化動畫！

如今的效果，怎麼說呢，滾動得太讓人鬧心，可讓動畫滾動開始和結束前，稍微停頓一下子：

@keyframes move {
  0%, 20%{
    transform: translateX(0px);
  }
  80%,100%{
    transform: translateX(calc(-100% + 100px));
  }
}
複製代碼

前 20% 保持效果不變，後 20% 亦是如此：

還有一個問題，這裏咱們的動畫時間是 3s，咱們能夠根據其文字長度來設置時間。即，更長的文字須要更長的時間。

但此處，我不知道用 CSS 怎麼辦，嘗試了幾回，最終仍是放棄了，使用了一小段 JS。

[...document.querySelectorAll('p')].forEach(p => {
	p.style.setProperty('--duration', p.offsetWidth / 100 + 's');
})
複製代碼

其中 --duration 是 CSS 變量（不熟悉的同窗請 google 之），p 標籤的 animation 屬性也須要相應變爲：

animation: move var(--duration) linear infinite;
複製代碼

最後，完整代碼和完整效果，請看codepen.io/laoyao/pen/…。

本文完。

謝謝閱讀！

🙏🙏🙏