如何防止 SVG 图标出现换行？

Answer 1

我为您提供了一个解决方案，需要进行 2 个基本更改

1. 将 SVG 转换为 .svg 图像 URL。
2. 将

   ::before

   添加到锚标记并将 SVG 添加到其

   content

示例：

p {
  max-width: 140px;
}

a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.a::before {
  content: url('https://img.cdn4dd.com/s/media/photosV2/1954ba82-d91f-43a2-8838-767fd2ad386f-retina-large.svg');
  display: block;
  width: auto;
  height: auto;
}

<p>
  This is some text that includes a link

  <a class="a" href="https://example.com">
    <span>
      &#40;example&#41;
    </span>
  </a>
</p>

Answer 2

我并不100%明白你在追求什么。

<nobr>

可以将内容放在一起：

p {
  width: 140px
}

<p>This is some text that includes a link 
  <nobr>(
    <a href="https://example.com">
      <svg style="height: 1em; color: green;" viewbox="0 0 10 10" fill="currentColor"><circle cx="5" cy="5" r="5" /></svg>example
    </nobr>
  </a>)</p>