CSS 文本超出提示效果( 三 ) _CSS

文章插图

如何实现的呢？其实借助上面的布局，这里实现就非常容易了，只需要对文本B 做滚动动画即可，关于 CSS3实现无缝滚动，这里介绍一下实现：

要做到首尾无缝滚动，首先需要复制一份相同的文本，这里使用 ::after 伪元素通过 content 生成

.title::after{content: attr(data-title);/*复制一份文本，下图绿色的部分*/}

文章插图

现在需要在一行显示，不换行

.title{/**/white-space: nowrap;}

文章插图

可以看到，虽然不换行了，但是宽度还是父级的宽度，并没有跟随文字内容，这时，可以设置 display: inline-block

.title{/**/display: inline-block;white-space: nowrap;}

文章插图

关于宽度跟随文字内容，其实还可以用 width: max-content 实现，兼容性略差

.title{/*display: inline-block;white-space: nowrap;*/width: max-content;}
接着，设置 animation 动画即可，只需要当 transform 位移到自身一半50% 时迅速归位，就能达到无缝衔接的效果，如下

.title:hover{/**/animation: move 10s .3s linear infinite;}@keyframes move {to {transform: translateX(-50%); /*位移到 50% 时 迅速归位*/}}

文章插图

这里首尾的间隙是用 padding 实现的

.title::after{content: attr(data-title);padding: 0 5em;/*无缝滚动的首位间隙*/}
在线例子可访问 codepen auto scroll list（记得鼠标放上去o~）

唯一的缺陷是动画时间是固定的，如果文本很长，可能出现滚动过快的问题

四、总结和说明
本文介绍了一种全新 CSS 自动判断多行文本的思路，并且带来3个人性化的小交互。总的来说，其实也没用到太多的技巧（主要还是想象力），结构还不算复杂，相信一步步看下来不会有很大的难度。

重点依旧是上面的布局部分，布局出来了，下面很多扩展效果也就迎刃而解了。由于只用到了 CSS2 相关特性（max-height、文本截断等），兼容性也是棒棒的，实测可以兼容到 IE7+（全兼容，放心使用），后面的超出滚动效果兼容到 IE10+ ，现在总结一下实现重点：

转换思路，节点复制是一个好办法
通过 max-height 可以判断单行和多行
灵活运用 CSS 障眼法层级覆盖和超出隐藏
direction：rtl 可以实现前置省略号的效果
中间省略号可以用两段文本拼接的方式模拟
宽度跟随文本自适应可以用 inline-block 实现
无缝滚动效果可以用位移 -50% 来实现

好了，这样一个成本低廉，又非常人性化的小功能，赶紧用起来吧。如果大家觉得不错的话，欢迎点赞、收藏、转发???~
References

[1] [codepen auto title] https://codepen.io/xboxyan/pen/WNppXxx
[2] [codepen auto title list] https://codepen.io/xboxyan/pen/eYvveBe
[3] [codepen auto middle ellipsis] https://codepen.io/xboxyan/pen/VwpPNbm
[3] [codepen auto scroll list] https://codepen.io/xboxyan/pen/ZEeerBb