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

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 年更新：

button {
  width: 95px;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis;
}

<button>Very long text Very long text Very long text</button>

现在似乎可以在 chrome 上运行（使用 chromium 86 进行测试）

Answer 3

是的，这是可能的，我已经在主要浏览器及其工作上进行了测试

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

您可以阅读有关文本溢出属性的更多信息