不定寬溢出文本適配滾動(dòng)

     title="溢出文本1 溢出文本2 溢出文本3 溢出文本4">溢出文本1 溢出文本2 溢出文本3 溢出文本4

 class="wrap">
     title="我的寬度是正常寬度">我的寬度是正常寬度
     class="scroll" title="我的寬度是溢出了一小部分">我的寬度是溢出了一小部分
     class="scroll" title="我的寬度是溢出了溢出了很大一部分">我的寬度是溢出了溢出了很大一部分

.wrap {
    position: relative;
    width: 150px;
    overflow: hidden;
}

p {
     white-space: nowrap;
}

使用 inline-block 獲取實(shí)際文本的寬度

由于

標(biāo)簽的寬度為父元素的 100%，如果是這樣，我們很難進(jìn)行下面的操作。我們首先需要拿到實(shí)際文本的寬度，這里可以借助 inline-block 的特性，做到這一點(diǎn)，我們改進(jìn)下我們的 CSS：

p {
 +  display: inline-block;
    white-space: nowrap;
}

這樣，當(dāng)前

標(biāo)簽的實(shí)際寬度，其實(shí)就是整個(gè)文本元素的寬度。

Tips：這里沒有使用 display: inline 是因?yàn)橄挛奈覀冃枰?p 元素滾動(dòng)起來需要用到 transform，但是 transform 是無法作用在內(nèi)聯(lián)元素之上的。具體可以參考規(guī)范：transformable element

算出滾動(dòng)距離，進(jìn)行滾動(dòng)

這樣，我們有了父元素的寬度 150px，文本的寬度。那么很容易得到需要滾動(dòng)的距離：

需要滾動(dòng)的距離 S = 溢出的文本元素的寬度 - 父元素的寬度

這樣，我們只需要找到一個(gè)可以表示并且當(dāng)前文本寬度是變量值即可。即是 -- transoform。

由于在使用 transform: translate() 進(jìn)行位移的時(shí)候，如果使用百分比表示，那么百分比的基準(zhǔn)元素是元素本身，也就是如果我們 transform: translate(100%, 0)，其實(shí)表示的就是向右移動(dòng)一個(gè)元素本身寬度的距離。

那么我們可以借助 calc 非常容易的拿到我們上述的需要滾動(dòng)的距離 S -- transform: translate(calc(-100% + 150px), 0)，嵌入動(dòng)畫中：

p:hover {
    animation: move 1.5s infinite alternate linear;
}

@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(calc(-100% + 150px), 0);
    }
}

至此，對(duì)于任意超出容器寬度的文本，我們都可以輕松的完成上述的效果。

不定寬文字跑馬燈來回滾動(dòng)展示 -- 父容器定寬，子元素不定寬:https://codepen.io/Chokcoco/pen/QWyoMrx

父容器不定寬度

當(dāng)然，還沒完。

如果父容器的寬度也是不固定的，或因?yàn)檎?calc 兼容性問題無法使用上述方法。那么，我們要做的就是，在一段固定的 CSS 代碼中，既能運(yùn)動(dòng)當(dāng)前元素的寬度，也能位移父容器的寬度。

正巧，CSS 還真能完成上述要求，我們改造一下 animation 的代碼：

@keyframes move {
    0% {
        left: 0;
        transform: translate(0, 0);
    }
    100% {
        left: 100%;
        transform: translate(-100%, 0);
    }
}

transform: translate(-100%, 0) 能夠向左位移自身寬度的 100%

left: 100% 能夠?qū)崿F(xiàn)向右位移父容器寬度的 100%

使用 margin-left 替換 left 也是一樣可以實(shí)現(xiàn)的，使用百分比表示的 margin-left 位移的基準(zhǔn)也是父元素的寬度。

這樣，不論父容器寬度如何，文本元素寬度如何，都可以實(shí)現(xiàn)對(duì)溢出文本適配滾動(dòng)展示。

不定寬文字跑馬燈來回滾動(dòng)展示 -- 父容器不定寬，子元素不定寬:https://codepen.io/Chokcoco/pen/oNbVGrd

部分不足之處

無法判斷文本長度是否超出父元素寬度

當(dāng)然，上述方案并非完美的方案，如果我們希望只針對(duì)本文長度溢出的情況，hover 的時(shí)候才進(jìn)行滾動(dòng)，這一點(diǎn)在使用純 CSS 的情況下是無法實(shí)現(xiàn)的。

我們無法通過 CSS 去判斷當(dāng)前元素長度是否大于父元素長度再選擇性的進(jìn)行動(dòng)畫。畢竟 CSS 只是負(fù)責(zé)樣式，不控制行為。所以實(shí)際使用中，可能還是需要借助 JavaScript 簡單判斷，然后通過一個(gè) class 進(jìn)行控制。

動(dòng)畫閃爍

在父容器不定寬度的情況下，由于需要同時(shí)對(duì)兩個(gè)屬性進(jìn)行動(dòng)畫，并且位移的方向是相反的，所以動(dòng)畫看上去會(huì)有一點(diǎn)閃爍。這個(gè)暫時(shí)沒有找到特別好的解決方案。

??愛心三連擊

分享前端好文，點(diǎn)亮?在看?