如何实现线条与方块元素始终跟随文本且换行时不分离？

嘿，我明白你的需求啦！你当前的布局问题在于，把标题文本和线条方块区域分成了两个独立的flex子项，所以它们没法在文本换行后跟着最后一行走。咱们调整一下布局结构和样式就能搞定：

解决方案思路 #

把标题文本和线条方块放在同一个行内弹性容器中，让整个组像行内元素一样随文本行流动，同时保证线条和方块不会被拆分到不同行，线条自动占据当前行的剩余空间。

修改后的代码 #

CSS 样式

/* 容器可以设置最大宽度模拟换行场景，根据你的需求调整 */
.component {
  max-width: 600px;
}

.title-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.title {
  flex: 0 1 auto;
  margin: 0;
}

.line-and-square {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  /* 强制线条和方块在同一行，不会被拆分 */
  white-space: nowrap;
}

.line {
  height: 3px;
  background-color: red;
  flex: 1;
  /* 给线条设置最小宽度，避免剩余空间过小时消失 */
  min-width: 20px;
}

.square {
  width: 20px;
  height: 20px;
  background-color: red;
}

HTML 结构

<div class="component">
  <div class="title-group">
    <h1 class="title">How can you ensure that the line follows the text in all circumstances?</h1>
    <div class="line-and-square">
      <div class="line"></div>
      <div class="square"></div>
    </div>
  </div>
</div>

效果说明 #

• 当文本未换行时：线条和方块紧跟在文本右侧，线条占据容器剩余的全部空间
• 当文本换行时：线条和方块会自动跑到文本最后一行的右侧，且两者始终保持在同一行不会分离
• 线条的min-width属性可以避免在剩余空间极小时线条完全消失，你可以根据需求调整这个值

备注：内容来源于stack exchange，提问作者Jimmy.D