CSS line-clamp嵌套button不生效：如何实现单行截断省略号？

可行方案 #

给嵌套的button添加以下关键样式，即可让它和锚点标签一样被容器的line-clamp规则截断：

button {
  /* 保留你原有的样式 */
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238);
  cursor: pointer;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  -moz-appearance: none;
  -webkit-logical-height: 1em;

  /* 新增的核心样式 */
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

如果希望完全复用容器的line-clamp配置，也可以让button继承相关属性：

button {
  /* 保留原有样式 */
  /* ... */

  display: -webkit-box;
  -webkit-line-clamp: inherit;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

原因说明 #

这是浏览器的预期行为，并非line-clamp的交互bug：

• <a>是行内非替换元素，内容会完全融入容器的排版流，容器的line-clamp规则可以直接作用于它的文本内容。
• <button>属于浏览器特殊处理的替换元素，即便设置display: inline，它的内在尺寸计算逻辑仍会优先保持自身内容的完整宽度，不会自动收缩适配容器，因此容器的line-clamp无法触发截断。

完整代码示例 #

CSS #

.clamp-line {
  -webkit-line-clamp: 1;
  overflow: hidden;
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238);
  cursor: pointer;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  -moz-appearance: none;
  -webkit-logical-height: 1em;

  /* 关键样式 */
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

HTML #

<h2>嵌套锚点标签可以正常截断</h2>
<div class="clamp-line">
  <a href="#">
    lorem ipsum dolor sit amet consectetur adipisicing elit
  </a>
</div>

<h2>添加样式后的嵌套按钮可以正常截断</h2>
<div class="clamp-line">
  <button>
     lorem ipsum dolor sit amet consectetur adipisicing elit
  </button>
</div>

内容的提问来源于stack exchange，提问作者Maximilian Schaum