带图标与居中文字的按钮组件：能否用纯CSS实现指定截断效果？

可以完全用纯CSS实现你要的按钮效果，不需要依赖ResizeObserver监听元素尺寸变化。下面是具体实现：

HTML结构 #

<button class="icon-button">
  <span class="icon-button__icon">🔍</span>
  <span class="icon-button__text">搜索内容</span>
</button>
<button class="icon-button">
  <span class="icon-button__icon">🔍</span>
  <span class="icon-button__text">搜索非常非常长的内容以至于会被截断显示</span>
</button>

CSS样式 #

/* 基础按钮样式 */
.icon-button {
  display: flex;
  align-items: center;
  /* 上下内边距自定义，右边内边距设为需要的边缘间距 */
  padding: 8px 16px;
  /* 左边内边距 = 边缘间距 + 图标宽度，保证图标到左边缘的距离和文字到右边缘一致 */
  padding-left: calc(16px + 24px);
  position: relative;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
}

/* 图标定位 */
.icon-button__icon {
  position: absolute;
  left: 16px; /* 和按钮右边内边距保持一致 */
  width: 24px; /* 固定图标宽度 */
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 文字处理 */
.icon-button__text {
  margin: 0 auto; /* 有足够空间时自动居中 */
  min-width: 0; /* 允许容器在空间不足时收缩，否则flex子项不会缩小 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 强制不换行 */
}

效果说明 #

• 按钮宽度足够时，文字通过margin: 0 auto实现居中，图标固定在左侧，且图标到左边缘、文字到右边缘的间距完全一致。
• 按钮宽度不足时，文字容器会被挤压，min-width: 0确保它能正常收缩，配合text-overflow: ellipsis实现文字截断，同时图标位置始终固定，不会被文字推动偏移。
• 全程不需要JavaScript计算尺寸，完全由CSS布局规则实现需求。

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