CSS实现图标跟随文本：解决flex order换行后图标错位问题

你遇到的核心问题是：使用flex的order调整图标位置后，文本换行时图标会停留在容器右侧远端，而非紧跟文本最后一行末尾。这是因为flex布局下，文本和图标是独立的flex项，会按容器宽度自动分配空间，而非自然跟随文本流。

下面是两种可行解决方案：

方案一：调整HTML结构（推荐） #

直接把文本移到图标元素之前，取消h3的flex布局，让图标以inline-block形式自然跟随文本流，这样文本换行时图标会自动落到最后一行末尾。

修改后的HTML：

<h3 data-id="articleTOC_4">
  Object Discrimination and Recognition of OthersObject Discrimination and Recognition of OthersObject Discrimination and Recognition of Others
  <a href="#" aria-hidden="true" class="aal_anchor" id="object-discrimination-and-recognition-of-others" data-href="#object-discrimination-and-recognition-of-others"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>
  <span class="copy-to-clipboard"><i class="epkbfa fa-solid fa-copy"></i></span>
</h3>

对应的CSS：

h3 {
  /* 恢复默认block布局，无需flex */
}
.aal_anchor {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle; /* 让图标与文本垂直居中对齐 */
}
.copy-to-clipboard {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  visibility: hidden;
}

方案二：嵌套Flex容器+JS调整文本位置（无需修改HTML结构） #

如果无法直接调整HTML顺序（插件固定图标位置），可以用JS将文本节点移到图标前面，再通过行内Flex容器让图标跟随文本流：

1. 添加CSS #

h3 {
  display: block;
}
.aal_anchor {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}
.copy-to-clipboard {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  visibility: hidden;
}

2. 添加JS代码 #

// 定位目标h3元素
const targetH3 = document.querySelector('h3[data-id="articleTOC_4"]');
// 找到h3内的纯文本节点
const textNode = Array.from(targetH3.childNodes).find(node => 
  node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ''
);
// 将文本节点移到最前面
if (textNode) {
  targetH3.insertBefore(textNode, targetH3.firstChild);
}

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