CSS文字超出 自动滚动

CSS文字超出 自动滚动，是在网页设计中一种非常有用的技巧。

当文字内容过多，而容器又不能够适应文字的长度时，就需要使用CSS来处理这种情况。

.text-overflow {
    white-space: nowrap;
     /* 禁止换行 */overflow: hidden;
     /* 超出部分隐藏 */text-overflow: ellipsis;
 /* 超出部分用省略号代替 */}
.auto-scroll {
    overflow: hidden;
     /* 隐藏超出部分 */text-align: center;
     /* 文字居中 */animation: scroll .5s linear infinite;
 /* 无限循环滚动*/}
@keyframes scroll {
0% {
transform: translateY(0)}
100% {
transform: translateY(-100%)}
 /* 向上滚动100% */}
    

以上是CSS代码：

• .text-overflow用于显示省略号代替超出部分，
• .auto-scroll用于自动滚动显示超出的长文本。

在HTML中，只需要将长文本放入auto-scroll容器中，设置相应的CSS样式即可。

div class="auto-scroll">
    div class="text-overflow">
    文本内容很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长/div>
    /div>
    

如此设计，就可以在网页中实现文字超出，自动滚动的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！