1

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

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

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

我在这里创建了一个 Codepen

这是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%);
}

对于我所缺少的任何帮助将不胜感激！

4

2 回答 2

1

给定的代码接近所需的内容，但我们需要将文本翻译的量等于它们的宽度减去看到它们的“窗口”的宽度，以便它们以它们右侧的最后一个字符结束这个。

我们可以计算它们必须行进的距离，即它们的宽度减去“窗口”宽度（在本例中为 200 像素）。

此片段中的文本也设置了 inline-block ，因此自动宽度有效。

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>

于 2021-06-14T05:06:04.007 回答
0

你能检查下面的代码吗？希望它对你有用。您需要添加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>

于 2021-06-14T05:03:03.767 回答