小技巧|巧妙实现不定宽溢出文本循环滚动展示

在日常布局当中，肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。

公司主营业务：成都做网站、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出中站免费做网站回馈大家。

但是，有的时候，由于场景的限制，可能会出现在一些无法使用超出打点省略的方法的场景，譬如在导航栏中：

这种情况下，在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。

hover 时弹出框提示

一种可行的方案是在 hover 的时候，弹出一个文本框展示全文，最简单的就是在文本标签下添加 title 属性，填充我们需要的内容：

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

当然，这种方法简单但是可能缺乏点用户体验。

本文将简单介绍在文本长度不确定，容器长度也不确定的情况下，任意长度的文本实现 hover 状态下，从左向右，滚动到文本末端，再滚动回初始位置，如此反复，像是这样：

容器定宽，文本不定宽

我们先假设一下，我们的容器的宽度如果是固定的，但是不确定每条文本的宽度。

像是这样：

 
 
 
 
    
  
  
  
  
  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 获取实际文本的宽度

由于

标签的宽度为父元素的 100%，如果是这样，我们很难进行下面的操作。我们首先需要拿到实际文本的宽度，这里可以借助 inline-block 的特性，做到这一点，我们改进下我们的 CSS：

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

这样，当前

标签的实际宽度，其实就是整个文本元素的宽度。

算出滚动距离，进行滚动

这样，我们有了父元素的宽度 150px，文本的宽度。那么很容易得到需要滚动的距离：

需要滚动的距离 S = 溢出的文本元素的宽度 - 父元素的宽度

这样，我们只需要找到一个可以表示并且当前文本宽度是变量值即可。即是 -- transoform。

由于在使用 transform: translate() 进行位移的时候，如果使用百分比表示，那么百分比的基准元素是元素本身，也就是如果我们 transform: translate(100%, 0)，其实表示的就是向右移动一个元素本身宽度的距离。

那么我们可以借助 calc 非常容易的拿到我们上述的需要滚动的距离 S -- transform: translate(calc(-100% + 150px), 0)，嵌入动画中：

 
 
 
 
    
  
  
  
  
  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.

至此，对于任意超出容器宽度的文本，我们都可以轻松的完成上述的效果。

不定宽文字跑马灯来回滚动展示 -- 父容器定宽，子元素不定宽

父容器不定宽度

当然，还没完。

如果父容器的宽度也是不固定的，或因为者 calc 兼容性问题无法使用上述方法。那么，我们要做的就是，在一段固定的 CSS 代码中，既能运动当前元素的宽度，也能位移父容器的宽度。

正巧，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.

使用 margin-left 替换 left 也是一样可以实现的，使用百分比表示的 margin-left 位移的基准也是父元素的宽度。

这样，不论父容器宽度如何，文本元素宽度如何，都可以实现对溢出文本适配滚动展示。

部分不足之处

1.无法判断文本长度是否超出父元素宽度

当然，上述方案并非完美的方案，如果我们希望只针对本文长度溢出的情况，hover 的时候才进行滚动，这一点在使用纯 CSS 的情况下是无法实现的。

我们无法通过 CSS 去判断当前元素长度是否大于父元素长度再选择性的进行动画。毕竟 CSS 只是负责样式，不控制行为。所以实际使用中，可能还是需要借助 JavaScript 简单判断，然后通过一个 class 进行控制。

2.动画闪烁

在父容器不定宽度的情况下，由于需要同时对两个属性进行动画，并且位移的方向是相反的，所以动画看上去会有一点闪烁。这个暂时没有找到特别好的解决方案。

最后

好了，本文到此结束，希望对你有帮助 ????

参考资料

[1]transformable element:

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

[2]不定宽文字跑马灯来回滚动展示 -- 父容器定宽，子元素不定宽:

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

[3]不定宽文字跑马灯来回滚动展示 -- 父容器不定宽，子元素不定宽:

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

当前标题：小技巧|巧妙实现不定宽溢出文本循环滚动展示
本文链接：http://www.shufengxianlan.com/qtweb/news12/508612.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

品牌网站设计知识

分类信息网站

南充网站建设　　 　网站建设方案　　 　雷运建站　　 　移动网站建设　　 　网络推广外包　　 　自贡网站建设　　 　app软件开发　　 　普特斯腐植酸　　 　品牌网站建设　　 　小谭建站　　 　汕尾凯敏网站　　 　B2C电商系统　　 　网络营销推广　　 　成都网站建设　　 　注册域名　　 　高端网站设计推广　　 　广安网站设计　　 　成都多线服务器托管　　 　云南护栏打桩机　　 　关键词排名