CSS实现两侧左对齐的点引导线问题求助

可以通过调整HTML结构，搭配Flex布局和CSS背景渐变来实现需求，既保证点引导线对齐，又能避免第一列出现不美观的换行。

推荐的HTML结构 #

每个条目用一个容器包裹，拆分出三部分：第一列内容、点引导线容器、第二列内容：

<div class="dot-section">
  <div class="item-row">
    <span class="col-first">第一列内容（支持自然换行或强制不换行）</span>
    <span class="dot-filler"></span>
    <span class="col-second">第二列左对齐内容</span>
  </div>
  <div class="item-row">
    <span class="col-first">更长的第一列内容，测试换行效果测试换行效果测试换行效果</span>
    <span class="dot-filler"></span>
    <span class="col-second">另一项左对齐内容</span>
  </div>
</div>

对应的CSS代码 #

/* 条目容器：Flex布局确保三部分横向排列 */
.item-row {
  display: flex;
  align-items: center;
  margin: 8px 0; /* 调整条目间距 */
}

/* 第一列：允许空间不足时收缩换行，避免生硬截断 */
.col-first {
  flex: 0 1 auto;
  margin-right: 10px;
  /* 若需强制第一列不换行，取消下面注释 */
  /* white-space: nowrap; */
}

/* 点引导线：填充两列间剩余空间，用渐变实现虚线 */
.dot-filler {
  flex: 1;
  height: 1px;
  /* 调整点的颜色、密度：第一个值是点的宽度占比，第二个是间距占比 */
  background-image: linear-gradient(to right, #333 50%, transparent 50%);
  background-size: 6px 1px; /* 第一个值控制点的大小/间距 */
  background-repeat: repeat-x;
}

/* 第二列：固定宽度不压缩，左对齐 */
.col-second {
  flex: 0 0 auto;
  margin-left: 10px;
}

关键说明 #

1. 第一列的换行控制：默认允许自然换行，若需要强制不换行，添加white-space: nowrap即可，避免出现突兀的截断
2. 点引导线的样式调整：修改background-image的颜色、background-size的数值，可以改变点的颜色、大小和密度
3. Flex布局保证了点线始终填充两列之间的剩余空间，不会出现对齐混乱的问题

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