如何让SVG图标与链接文本同布局，避免其前后不必要换行？

要让SVG像普通文本字符一样融入链接，只在链接整体前有空白时才允许SVG附近换行，同时保留文本内外的正常换行能力，可以按以下步骤操作：

• 给SVG设置 display: inline，让它成为行内文本流的一部分（默认SVG可能是inline-block，这会导致布局引擎把它当成独立元素，允许前后换行）
• 删掉SVG和链接文本之间的HTML空白（比如换行、空格），避免布局引擎把它们拆成两个独立的行内框
• 可选添加 vertical-align: middle，让SVG图标和文本对齐更协调

示例代码 #

<p>这是一段包含链接的文本(
  <a href="#">
    <svg style="display: inline; vertical-align: middle;" width="16" height="16" viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
    </svg>链接文本示例
  </a>) 这是后续文本内容。
</p>

原理说明 #

把SVG设为inline后，它会和链接文本合并成同一个行内文本流，此时布局引擎只会在链接整体之前的空白位置（比如示例里左括号前的空格）或者链接文本内部的空白处换行，不会在SVG和链接文本之间、SVG和左括号之间随意拆分换行。同时保持默认的white-space: normal，链接文本内部的空格依然会触发正常换行，完全符合需求。

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