SVG图标需随后续文字换行：已尝试多方案均无效求解决

直接把SVG图标和div里的第一个文字用<span>包起来，给这个span加white-space: nowrap样式即可，具体操作如下：

调整后的代码结构 #

<div class="highlight">
  <span class="nowrap-group">
    <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- 这里是你的带动画的SVG内容 -->
      <style>
        @keyframes spin {
          from {transform: rotate(0deg);}
          to {transform: rotate(360deg);}
        }
        .icon-path {animation: spin 2s linear infinite;}
      </style>
      <path class="icon-path" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" stroke="currentColor" />
    </svg>
    首个文字
  </span>
  其他需要正常换行的文字内容
</div>

.highlight {
  background: #f5f5f5;
  padding: 2px 4px;
  display: inline;
}

.nowrap-group {
  white-space: nowrap;
}

方案优势 #

• 仅将图标与首个文字绑定为不换行单元，div内其余文字仍能随容器宽度正常换行，完全匹配需求；
• SVG的@keyframes动画不受任何影响，动画逻辑保持原样即可；
• 兼容Chrome、Firefox等主流浏览器，不会出现定位方案的浏览器差异问题；
• 无需处理空格、特殊字符或伪元素，结构清晰易维护。

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