如何在不使用 Flexbox 的情况下在文本中对齐 SVG 图标，同时保持截断？

Question

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

svg {
  /* The size of the icon can vary */
  width: 24px;
  height: 24px;
}

<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 的高度和宽度为 24px，但该大小可能会改变。

是否有一种方法可以使 SVG 始终居中，无论 SVG 的大小如何，而不破坏截断？ （添加显示：flex打破省略号截断）。

我也尝试过这篇博文中列出的策略，但它要求 SVG 的高度/宽度为 1em，如果我增加该大小，我不确定如何动态计算最高值。

Answer 1

更改

viewbox

，添加 css

vertical-align

.box {
  width         : 230px;
  border        : 1px solid black;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
  }
svg {
  width          : 20px;
  height         : 20px;
  vertical-align : bottom;
  }

<div class="box">
  <span class="text truncate">
    This is text
    <svg viewBox="4 4 40 40">
      <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>