Button元素不尊重文本溢出：省略号容器

Question

我有一个同时包含<a>和<button>元素的应用程序。在大多数情况下，两者表现相同。但是，在text-overflow: ellipsis容器中，按钮文本将被剪切而不会接收省略号。示例：http://codepen.io/TrevorBurnham/pen/pNxeVW

＆＃13;

＆＃13;

.text-overflow-ellipsis {
  border: 1px solid black;
  padding: 10px;
  width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-button {
  display: inline;
  font: inherit;
  background: none;
  border: none;
  padding: 0;
}
a, button {
  cursor: pointer;
}

＆＃13;

<div class="text-overflow-ellipsis">
  <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>      
</div>
<div class="text-overflow-ellipsis">
  <button class="link-button">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>      
</div>

＆＃13;

＆＃13;

＆＃13;

在这种情况下，<button>是内联元素。事实上，据我所知，它具有与<a>元素相同的（相关的）CSS属性！然而，在这一背景下，它的表现却不同。起初我认为这必须是一个浏览器错误，但我在Chrome，Safari，Firefox和Edge中看到了相同的行为。

<button>这里有什么特别之处？这种行为是由the spec决定的吗？是否有任何方法可以让<button>像<a>那样表现？

（我知道我可以让<button>本身成为text-overflow: ellipsis容器来创建我想要的效果，但我想了解发生了什么我只对纯CSS解决方案感兴趣，或者解释为什么没有这样的解决方案。）

Answer 1

那是因为按钮是替换元素。它们无法以内嵌方式显示，您的display: inline实际上就像display: inline-block一样。这确实取决于spec：

  

'display'值为'inline'的非替换元素会生成一个   内联框。不是内联框的内联级框（例如   替换了内联级元素，内联块元素和   内联表元素）称为原子内联级别框，因为   他们作为单个不透明参与其内联格式化上下文   框。

因此，您需要将text-overflow直接设置为按钮，即块容器。

.text-overflow-ellipsis {
  border: 1px solid black;
  padding: 10px;
  width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-button {
  box-sizing: content-box;
  display: inline;
  font: inherit;
  background: none;
}
a, button {
  cursor: pointer;
}

<div class="text-overflow-ellipsis">
  <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>      
</div>
<div>
  <button class="link-button text-overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>      
</div>