如何实现hover时以滑动方式展示动态截断的完整文本？

核心问题原因 #

1. 你给.link设置了display:block，导致它的宽度默认继承父容器的200px，超出的文本本身不属于.link的盒子范围，平移时自然无法展示截断部分
2. 平移距离写死为translateX(-100%)，没有根据文本实际宽度和容器宽度的差值动态计算，导致短文本平移出现空白、长文本平移距离错误无法展示完整内容

修复后的CSS代码 #

HTML部分无需修改，替换原有CSS即可：

ul {
  width: 200px;
  background: #f2f2f2;
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
  overflow: hidden;
  width: 100%;
}
.link {
  display: inline-block;
  white-space: nowrap;
  transform: translateX(0);
  transition: 4s ease-in-out;
}
.link:hover {
  color: red;
  transform: translateX(min(0px, calc(200px - 100%)));
}

修复说明 #

• 把.link改为inline-block后，它的宽度会由内部文本实际长度撑开，平移时可以带着全部文本移动
• min(0px, calc(200px - 100%))会自动判断文本长度：如果文本宽度小于等于200px，计算结果为0，不会发生平移，不会出现多余空白；如果文本长度大于200px，计算结果刚好是需要向左平移的距离，滑动结束后文本末尾刚好对齐容器右侧，完整展示全部内容

内容的提问来源于stack exchange，提问作者Kiki