使用 CSS 在悬停时显示剪切的文本答案

【问题标题】：Show clipped text on hover with CSS使用 CSS 在悬停时显示剪切的文本
【发布时间】：2016-06-30 10:38:25
【问题描述】：

我为带有不同标题的按钮制作了一个通用的按钮样式。该按钮具有固定宽度，因此有时文本不适合。使字体更小无济于事，因为文本变得如此之小以至于无法阅读。我的想法是使文本向左移动，以便隐藏的部分在鼠标悬停时显示。但是，文本只有在太长时才应该移动。如果它适合按钮，它不应该移动。这是我的代码：

.button {
  display: block;
  font-size: 11px;
  height:30px;
  overflow: hidden;
  padding: 3px 5px 0 0;
  text-align: right;
  text-overflow: "   ";
  white-space: nowrap;
  width: 120px;
  background-color: #ccc;
  border-radius: 5px;
  margin-bottom: 5px;
}

.button:hover {
  padding-right: 120px;
}

<a href="" class="button">Short</a>
<a href="" class="button">Longer example</a>

它没有按预期工作。有什么想法吗？

谢谢。

【问题讨论】：

CSS 无法检测文本宽度。你需要javascript。
除了@Paulie_D，你还可以做一个动态按钮，这意味着按钮可以在文本变大的同时增加宽度。但是如果你想保持固定的宽度，你至少不能用纯 CSS
使用溢出：隐藏和悬停溢出：可见
这不是一个好主意。文本将与按钮重叠，看起来有点糟糕。另外，我不明白为什么文本不会在 padding-right 悬停时移动？

标签： css text hidden

【解决方案1】：

更改悬停时文本的direction，使其在左侧而不是右侧溢出。

.button {
  display: block;
  font-size: 11px;
  height:30px;
  overflow: hidden;
  padding: 3px 5px 0 0;
  text-align: right;
  text-overflow: "   ";
  white-space: nowrap;
  width: 66px;
}

.button:hover {
  direction:rtl;
}

<a href="" class="button">Short</a>
<a href="" class="button">Longer example</a>

请注意，我必须缩短此 sn-p 中按钮的宽度，以使“更长的示例”实际上溢出。

【讨论】：

动画看起来有点奇怪，但我认为你的解决方案目前最接近我正在寻找的东西。