Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

谢谢。

Answer 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>

请注意，我必须缩短此代码段中按钮的宽度，以使“较长的示例”实际溢出。

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

1 个答案: