日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
小技巧|巧妙實(shí)現(xiàn)不定寬溢出文本循環(huán)滾動(dòng)展示

在日常布局當(dāng)中，肯定經(jīng)常會(huì)遇到文本內(nèi)容超過(guò)容器的情況。非常常見(jiàn)的一種解決方案是超出省略。

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出中站免費(fèi)做網(wǎng)站回饋大家。

但是，有的時(shí)候，由于場(chǎng)景的限制，可能會(huì)出現(xiàn)在一些無(wú)法使用超出打點(diǎn)省略的方法的場(chǎng)景，譬如在導(dǎo)航欄中：

這種情況下，在容器定寬但是文本又溢出且不能換行的情況下，我們就需要尋求另外的解決方案。

hover 時(shí)彈出框提示

一種可行的方案是在 hover 的時(shí)候，彈出一個(gè)文本框展示全文，最簡(jiǎn)單的就是在文本標(biāo)簽下添加 title 屬性，填充我們需要的內(nèi)容：

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2.     溢出文本1 溢出文本2 溢出文本3 溢出文本4
     
    3. 
   
  
  
  
  3.  
    4.

當(dāng)然，這種方法簡(jiǎn)單但是可能缺乏點(diǎn)用戶體驗(yàn)。

本文將簡(jiǎn)單介紹在文本長(zhǎng)度不確定，容器長(zhǎng)度也不確定的情況下，任意長(zhǎng)度的文本實(shí)現(xiàn) hover 狀態(tài)下，從左向右，滾動(dòng)到文本末端，再滾動(dòng)回初始位置，如此反復(fù)，像是這樣：

容器定寬，文本不定寬

我們先假設(shè)一下，我們的容器的寬度如果是固定的，但是不確定每條文本的寬度。

像是這樣：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     我的寬度是正常寬度
     
    3. 
  
  
  
  
  3.     我的寬度是溢出了一小部分
     
    4. 
  
  
  
  
  4.     我的寬度是溢出了溢出了很大一部分
     
    5.
  
  
 
 
 
    
   
  
  
  
  1. .wrap { 
    2. 
   
  
  
  
  2.     position: relative; 
    3. 
   
  
  
  
  3.     width: 150px; 
    4. 
   
  
  
  
  4.     overflow: hidden; 
    5. 
   
  
  
  
  5. } 
    6. 
   
  
  
  
  6.  
    7. 
   
  
  
  
  7. p { 
    8. 
   
  
  
  
  8.      white-space: nowrap; 
    9. 
   
  
  
  
  9. } 
    10.

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

由于

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

 
 
 
 
    
  
  
  
  
  1. p { 
    2. 
  
  
  
  
  2.  +  display: inline-block; 
    3. 
  
  
  
  
  3.     white-space: nowrap; 
    4. 
  
  
  
  
  4. } 
    5.

這樣，當(dāng)前

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

  • Tips：這里沒(méi)有使用 display: inline 是因?yàn)橄挛奈覀冃枰?p 元素滾動(dòng)起來(lái)需要用到 transform，但是 transform 是無(wú)法作用在內(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)畫(huà)中：

 
 
 
 
    
  
  
  
  
  1. p:hover { 
    2. 
  
  
  
  
  2.     animation: move 1.5s infinite alternate linear; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. @keyframes move { 
    6. 
  
  
  
  
  6.     0% { 
    7. 
  
  
  
  
  7.         transform: translate(0, 0); 
    8. 
  
  
  
  
  8.     } 
    9. 
  
  
  
  
  9.     100% { 
    10. 
  
  
  
  
  10.         transform: translate(calc(-100% + 150px), 0); 
    11. 
  
  
  
  
  11.     } 
    12. 
  
  
  
  
  12. } 
    13.

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

不定寬文字跑馬燈來(lái)回滾動(dòng)展示 -- 父容器定寬，子元素不定寬

父容器不定寬度

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

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

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

 
 
 
 
    
  
  
  
  
  1. @keyframes move { 
    2. 
  
  
  
  
  2.     0% { 
    3. 
  
  
  
  
  3.         left: 0; 
    4. 
  
  
  
  
  4.         transform: translate(0, 0); 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.     100% { 
    7. 
  
  
  
  
  7.         left: 100%; 
    8. 
  
  
  
  
  8.         transform: translate(-100%, 0); 
    9. 
  
  
  
  
  9.     } 
    10. 
  
  
  
  
  10. } 
    11.
  • 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)展示。

  • 不定寬文字跑馬燈來(lái)回滾動(dòng)展示 -- 父容器不定寬，子元素不定寬

部分不足之處

1.無(wú)法判斷文本長(zhǎng)度是否超出父元素寬度

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

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

2.動(dòng)畫(huà)閃爍

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

最后

好了，本文到此結(jié)束，希望對(duì)你有幫助 ????

參考資料

[1]transformable element:

https://drafts.csswg.org/css-transforms-1/#transformable-element

[2]不定寬文字跑馬燈來(lái)回滾動(dòng)展示 -- 父容器定寬，子元素不定寬:

https://codepen.io/Chokcoco/pen/QWyoMrx

[3]不定寬文字跑馬燈來(lái)回滾動(dòng)展示 -- 父容器不定寬，子元素不定寬:

https://codepen.io/Chokcoco/pen/oNbVGrd[4]Github -- iCSS: https://github.com/chokcoco/iCSS


分享標(biāo)題：小技巧|巧妙實(shí)現(xiàn)不定寬溢出文本循環(huán)滾動(dòng)展示
文章起源：http://www.dlmjj.cn/article/dhdgpod.html