悬停以滑动方式显示截断的文本

Question

我试图在悬停时显示一些被截断的文本。文本都将是动态的，因此每一里都是不同长度的文本。

理想的情况是悬停截断的文本，它滑动以显示文本的全长并在末尾结束。

我已经创建了一些接近我需要的东西，只是我不知道如何在悬停时删除右侧较短文本末尾的所有额外 space，以及如何获得它显示较长的所有文本（它们似乎被切断）

这里是 HTML:

<ul>
  <li>
    <a class="link" href="#">Example of really long blog title goes here</a>
  </li>
   <li>
    <a class="link" href="#">Example of really long blog title goes here - this is a longer text</a>
  </li>
   <li>
    <a class="link" href="#">Example of really long blog title goes here - this is an even longer length to test</a>
  </li>
</ul>

还有 CSS

ul {
  width:200px;
  overflow:hidden;
  background:#f2f2f2;
}
.link {
  display:block;
  white-space: nowrap;
  width:auto;
    transform: translateX(0%);
    transition: 4s ease-in-out;
}
.link:hover {
  color:red;
   transform: translateX(-100%);
}

任何关于我遗漏的帮助将不胜感激！

Answer 1

你能检查一下下面的代码吗？希望它对你有用。您需要为 li 添加样式，如下所示：

ul {
  width: 200px;
  overflow: hidden;
  padding: 0;
  background: #f2f2f2;
}

ul li {
  display: flex;
  display: -webkit-flex;
}

.link {
  display: block;
  white-space: nowrap;
  width: auto;
  transform: translateX(0%);
  transition: 4s ease-in-out;
}

.link:hover {
  color: red;
  transform: translateX(-100%);
}

<ul>
  <li>
    <a class="link" href="#">Example of really long blog title goes here</a>
  </li>
  <li>
    <a class="link" href="#">Example of really long blog title goes here - this is a longer text</a>
  </li>
  <li>
    <a class="link" href="#">Example of really long blog title goes here - this is an even longer length to test</a>
  </li>
</ul>

Answer 2

给定的代码接近所需的代码，但我们需要文本翻译的量等于它们的宽度减去 'window' 的宽度，以便它们以他们右边的最后一个字符。

我们可以用宽度减去 'window' 宽度（本例中为 200px）计算出它们必须行进的距离。

此代码段中的文本还设置了行内块，因此自动宽度有效。

ul {
  width: 200px;
  overflow: hidden;
  background: #f2f2f2;
}

li a {
  display: inline-block;
  white-space: nowrap;
  width: auto;
  transform: translateX(0%);
  transition: 4s ease-in-out;
}

.link:hover {
  color: red;
  transform: translateX(calc(-100% + 200px));
}

<ul>
  <li>
    <a class="link" href="#">Example of really long blog title goes here</a>
  </li>
  <li>
    <a class="link" href="#">Example of really long blog title goes here - this is a longer text</a>
  </li>
  <li>
    <a class="link" href="#">Example of really long blog title goes here - this is an even longer length to test</a>
  </li>
</ul>

悬停以滑动方式显示截断的文本

Hover to reveal truncated text in sliding fashion

html

css

hover