不使用flexbox，如何在保持文本截断时对齐文本内的SVG图标？

示例代码 #

CSS #

.box {
  width: 230px;
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

svg {
  /* 图标尺寸可能变化 */
  width: 24px;
  height: 24px;
}

HTML #

<div class="box">
  <span class="text truncate">
    This is text
    <svg width="48" height="48" viewBox="0 0 48 48">
      <path id="icon-info" d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z">
      </path>
    </svg>
    and it should truncate
  </span>
</div>

问题描述 #

示例中文本内包含SVG图标，SVG的宽高可能动态变化，需要在不破坏text-overflow: ellipsis截断效果的前提下，让SVG始终与文本垂直居中对齐。尝试过flex布局但会破坏截断效果，也试过基于1em尺寸的方案，但SVG尺寸变化时无法动态计算定位值。

解决方案 #

方法一：使用vertical-align: middle #

这是最简单的方案，仅需给SVG添加vertical-align: middle样式，即可让SVG与文本垂直居中，且完全不影响文本截断效果。

修改后的CSS：

.box {
  width: 230px;
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

svg {
  /* 尺寸可任意调整 */
  width: 48px;
  height: 48px;
  vertical-align: middle;
  /* 可选：添加margin调整与文本的间距 */
  margin: 0 6px;
}

原理：vertical-align: middle会让SVG的垂直中线与父文本的中线对齐，无论SVG尺寸多大，都能保持居中，且SVG作为行内元素会被包含在nowrap的文本流中，截断效果不受影响。

方法二：使用相对定位+Transform #

如果需要更精准的居中（比如让SVG的几何中心与文本中心完全对齐），可以用相对定位结合transform: translateY(-50%)实现，同样不会破坏截断效果：

修改后的CSS：

.box {
  width: 230px;
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

svg {
  /* 尺寸可任意调整 */
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 6px;
}

原理：通过top: 50%将SVG的顶部定位到父元素垂直中点，再用transform: translateY(-50%)将SVG向上偏移自身高度的一半，实现精准居中。display: inline-block确保SVG作为行内块元素被包含在文本流中，不影响截断。

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