如何通过CSS将sign元素移至所有word元素前方且不修改HTML结构

使用 CSS Flex 布局的 order 属性即可实现需求，完全不需要修改原有HTML结构，也能适配后续.word元素的增删场景：

/* 父容器开启弹性布局 */
.destination.full {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25em; /* 控制单词间距，可按需调整 */
  align-items: center;
}

/* 将sign元素的排序优先级调到最高 */
.destination.full .sign {
  order: -1;
}

原理解释 #

• 所有Flex子元素的默认order值为0，我们给.sign设置order: -1，就会让它排在所有默认order的子元素（也就是所有.word元素）的最前面
• .word元素的相对顺序完全和HTML结构保持一致，不会互相影响，增删.word元素时不需要修改任何CSS
• inline-flex让容器保持行内元素特性，和普通文本展示行为一致，flex-wrap: wrap保证内容过长时可以正常换行，不会破坏布局
• gap属性统一控制元素间距，保证语句排版自然，语义通顺。

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