网上找了好久,终于找到了个能实现的,把它整理一下。
需求:表格内字体过长实现自动滚动
实现思路如下:
html:
<div class="item-column" style="background: rgb(12, 87, 154); width: 18%; height: 60px; line-height: 60px;"><p class="scrollDiv">让我更热个热更热个人人人歌更让人热啊隔热个人</p></div>
css:
.item-column {height: 200px;width: 300px;overflow:hidden;
}.item-column>p {white-space: nowrap; //设置不换行
}.scrollDiv {position: relative;animation: scroll 30s infinite linear; //滚动速度,值越大越慢
}@keyframes scroll {//滚动范围0% { left: 5%; }100% { left: -100%; }
}
js:
//根据class获取所有的集合,然后遍历判断实际内容长度是否大于可视区域,是的话就加上带滚动效果的classvar itemColumns = document.getElementsByClassName("item-column");for (let i = 0; i < itemColumns.length; i+