如何在HTML中实现支持响应式缩放的文本间重复字符填充？

我来帮你搞定这个问题！你之前用多个div加float的方式确实没法实现中间点自适应填充的效果，因为float元素会脱离正常文档流，中间的点容器没法自动占满剩余空间。这里给你推荐两种纯CSS的解决方案，都是响应式的，能随容器尺寸自动调整中间点的数量：

方法1：用Flex布局+伪元素实现字符“.”填充 #

这种方法完全用字符“.”来填充中间空隙，会随容器宽度自动调整显示的点数量：

<style>
  .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    width: 100%;
  }
  .left-text, .right-text {
    white-space: nowrap; /* 防止文本换行，保证内容完整显示 */
    margin: 0 8px; /* 给文本和点之间留点间距，视觉更舒适 */
  }
  .dot-filler {
    flex-grow: 1; /* 自动占满左右文本之间的剩余空间 */
    overflow: hidden; /* 隐藏超出容器的多余点 */
  }
  .dot-filler::after {
    content: "........................................................................";
    /* 这里放足够多的点，确保能填满最大可能的宽度 */
    display: block;
    white-space: nowrap;
  }
</style>

<div class="info-row">
  <span class="left-text">Left</span>
  <span class="dot-filler"></span>
  <span class="right-text">Right</span>
</div>
<div class="info-row">
  <span class="left-text">Longer Left Text Example</span>
  <span class="dot-filler"></span>
  <span class="right-text">Longer Right Text</span>
</div>

原理说明：

• 父容器用display: flex让三个子元素在一行排列并垂直居中
• 左右文本设置white-space: nowrap避免换行，保证文本完整显示
• 中间的.dot-filler通过flex-grow: 1自动占满左右文本之间的剩余空间
• 用伪元素::after生成足够多的点，overflow: hidden会自动隐藏超出容器的部分，实现自适应填充

方法2：用Flex布局+边框点（更简洁高效） #

如果可以接受用边框样式的点代替字符“.”，这种方法更简洁，渲染也更高效：

<style>
  .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    width: 100%;
  }
  .left-text, .right-text {
    white-space: nowrap;
    margin: 0 8px;
    background: #fff; /* 用背景色覆盖下方的边框点，避免点穿过文本 */
    padding: 0 4px;
  }
  .dot-border {
    flex-grow: 1;
    border-bottom: 1px dotted #000; /* 用点状边框实现填充效果 */
    height: 0.5em; /* 调整边框的垂直位置，和文本对齐 */
  }
</style>

<div class="info-row">
  <span class="left-text">Left</span>
  <span class="dot-border"></span>
  <span class="right-text">Right</span>
</div>

原理说明：

• 核心还是Flex布局让元素自适应排列
• 中间的.dot-border用border-bottom: dotted实现点线，通过flex-grow: 1占满剩余空间
• 给左右文本加背景色和内边距，避免边框点穿过文本内容

这两种方法都能完美解决你遇到的响应式问题，不需要JavaScript，纯CSS就能实现，而且结构比你之前用多个float div的方式更清晰易维护。

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