文字溢出显示省略号，鼠标移入滚动显示

需求效果展示：

上代码：

注意：先确定鼠标可以选中，如果选中不了需要加上pointer-events: all;

span: {
  overflow: hidden; // 隐藏溢出的部分
  text-overflow: ellipsis; // 当对象内文本超出时显示省略标记(...)
  white-space: nowrap; // 规定段落中的文本不进行换行
  font-size: 36px;
  &:hover {
    overflow: visible; // 内容不会被修剪，会呈现在元素框之外
    // 指定动画完成时间 选择器名称 设置动画将如何完成一个周期 指定动画应该播放无限次(永远) 是否            
       循环交替反向播放动画
    animation: 3s siderbar linear infinite normal;
    z-index: 0;
  }
  @keyframes siderbar {
    0% {
      transform: translateX(0);
      -webkit-transform: translateX(0);
    }
    100% {
      transform: translateX(-45px);
      -webkit-transform: translateX(-45px);
    }
  }
}

第二种：

.textleftP2{
  animation-play-state: paused; // 指定暂停动画
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.textleftP2:hover {
  // 选择器名称 指定动画完成时间 设置动画将如何完成一个周期 指定动画应该播放无限次（永远）
  animation: textLeft 7s linear infinite;
  animation-play-state: running; // 指定正在运行的动画
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}
@keyframes textLeft {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  100% {
    transform: translateX(-45px);
    -webkit-transform: translateX(-45px);
  }
}