重点：使用 inline-block 获取实际文本的宽度
由于 <p> 标签的宽度为父元素的 100%，如果是这样，我们很难进行下面的操作。我们首先需要拿到实际文本的宽度，这里可以借助 inline-block 的特性，做到这一点.
<style>
.wrap {
position: relative;
width: 200px;
height: 100vh;
background: #ddd;
overflow: hidden;
}
span {
display: inline-block;
white-space: nowrap;
padding: 5px;
line-height: 24px;
cursor: pointer;
}
.one:hover {
animation: move 5s infinite alternate linear;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(calc(-100% + 200px), 0);
}
}
</style>
</head>
<body>
<div class="wrap">
<span class="one" title="Overflow scorll left to right Overflow">Overflow scorll left to right Overflow</span>
<span class="one" title="AAA BBB CCC DDD EEE FFF DDD GGG">AAA BBB CCC DDD EEE FFF DDD GGG</span>
<span class="" title="AAA BBB CCC">AAA BBB CCC</span>
<span class="one" title="AAA BBB CCC DDD EEE FFF DDD GGG HHH III">AAA BBB CCC DDD EEE FFF DDD GGG HHH III</span>
</div>
</body>
image.png
有时候我们也不确定父元素的宽度，这时候我们只要改变一下我们动画效果
.wrap {
position: relative;
width: 10vw;
height: 100vh;
background: #ddd;
overflow: hidden;
resize: horizontal;
}
.wrap::-webkit-scrollbar {
width: 200px;
height: 200px;
}
span {
position: relative;
display: inline-block;
white-space: nowrap;
padding: 5px;
line-height: 24px;
cursor: pointer;
transition: .5s all;
will-change: left, transform;
}
.scroll:hover {
animation: move 2s infinite alternate linear;
}
@keyframes move {
0% {
left: 0;
transform: translate(0, 0);
}
100% {
left: 100%;
transform: translate(-100%, 0);
}
}
</style>
</head>
<body>
<div class="wrap">
<span class="scroll" title="Overflow scorll left to right Overflow">Overflow scorll left to right
Overflow</span>
<span class="scroll" title="AAA BBB CCC DDD EEE FFF DDD GGG">AAA BBB CCC DDD EEE FFF DDD GGG</span>
<span class="scroll" title="AAA BBB CCC">AAA BBB CCC</span>
<span class="scroll" title="AAA BBB CCC DDD EEE FFF DDD GGG HHH III">AAA BBB CCC DDD EEE FFF DDD GGG HHH
III</span>
