Question

我不确定是否可以在text-overflow: ellipsis;元素上使用<button>样式。这是我的尝试：http://jsfiddle.net/WilsonPage/tK727/

Answer 1

由于浏览器的限制，请将按钮文本包装在内部，例如一个span元素并在其上设置样式。示例（也以jsfiddle提供）：

<style>
.buttontext {
  width: 95px;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis;
}
</style>
<button><span class="buttontext">Very long text Very long text
Very long text</span></button>

Answer 2

更新2020：

<style>
button {
  width: 95px;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis;
}
</style>
<button>Very long text Very long text
Very long text</button>

现在似乎可以在铬上使用（已测试铬86）

Answer 3

你可能的＆amp;我已在主要浏览器及其工作

上进行了测试

您可以看到现场演示： - http://jsfiddle.net/tK727/2/

you can read more about text-overflow property

Answer 4

是的，确实如此。你的榜样非常完美！：）

是否可以在按钮元素上使用文本溢出：省略号？

4 个答案: