不定宽溢出文本适配滚动

方法一：
缺点：需要父级定宽
原理：

1. 使用inline-block可以获取到内容的宽度
2. 然后使用white-space: nowrap使内容不会折行
3. 算出需要滚动的距离：滚动的距离 S = 溢出的文本元素的宽度 - 父元素的宽度
   4.由于在使用 transform: translate() 进行位移的时候，如果使用百分比表示，那么百分比的基准元素是元素本身，也就是如果我们 transform: translate(100%, 0)，其实表示的就是向右移动一个元素本身宽度的距离。

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

<div class="wrap">
    
<p title="我的宽度是正常宽度">我的宽度是正常宽度</p>
<p class="scroll" title="我的宽度是溢出了一小部分">我的宽度是溢出了一小部分</p>
    
<p class="scroll" title="我的宽度是溢出了溢出了很大一部分">我的宽度是溢出了溢出了很大一部分</p>
</div>

.wrap {
  position: relative;
  width: 150px;
  overflow: hidden;
}

p {
  white-space: nowrap;
}

关键代码↓

p:hover {
    animation:move 1.5s infinite alternate linear;
}

@keyframes
 move {   
 0% {        
     transform: translate(0, 0);   
 }    
 100% {     
   transform: translate(calc(-100% + 150px), 0); 
 }
}

方法二：
父级不定宽度的方法
缺点：
需要js配合，否则会对所有p元素都产生效果

原理：

1. 就是先将自己的内容向左移动自身宽度的100%，父级不动， 然后将自己的内容向左移动自身宽度的100%，父级向右移动100%；

@keyframes move {
  0 % {
    left: 0;
    transform: translate (0, 0);
  }

  100 % {
    left: 100 %;
    transform: translate (-100 %, 0);
  }
}