如何实现带填充点与结尾数字的摘要式文本框

嘿，我来给你分享个实用的实现方案，完美搞定这种左侧是自定义文本、中间自动填充点、右侧固定数字的文本框效果～

方法一：文本式填充点（贴近原生字体风格） #

这种方法用纯文本点来填充，视觉上会和你的字体风格更统一，步骤超简单：

首先是HTML结构，用一个容器包裹三部分内容：

<div class="dot-box">
  <span class="text-content">这是一段示例标题文本</span>
  <span class="fill-dots">........................................................................................................................................</span>
  <span class="end-number">123</span>
</div>

然后是CSS样式，通过Flex布局让中间的点自动填满空白：

.dot-box {
  display: flex;
  align-items: center;
  width: 400px; /* 这里设置你需要的预定宽度，也可以用百分比比如100% */
  font-size: 16px;
  margin: 10px 0;
}

.text-content {
  white-space: nowrap; /* 防止文本换行 */
  margin-right: 8px;
}

.fill-dots {
  flex: 1; /* 让这个元素占满剩余空间 */
  overflow: hidden; /* 隐藏超出的点 */
  height: 1em;
  line-height: 1em;
}

.end-number {
  white-space: nowrap;
  margin-left: 8px;
}

方法二：背景渐变填充点（更精准可控） #

如果你想让点的大小、间距完全自己掌控，不受字体影响，用背景渐变的方式更靠谱：

HTML结构可以简化一点，不需要单独的点元素，用伪元素来生成：

<div class="dot-box">
  <span class="text-content">另一段不同的示例文本</span>
  <span class="end-number">456</span>
</div>

对应的CSS代码：

.dot-box {
  display: flex;
  align-items: baseline;
  width: 400px;
  font-size: 16px;
  margin: 10px 0;
}

/* 用伪元素生成中间的填充点 */
.dot-box::before {
  content: "";
  flex: 1;
  margin: 0 8px;
  height: 1px;
  /* 自定义点的大小和间距：这里是2px宽的点，间隔4px */
  background: repeating-linear-gradient(to right, #333, #333 2px, transparent 2px, transparent 6px);
}

.text-content {
  white-space: nowrap;
}

.end-number {
  white-space: nowrap;
}

两种方法都能实现你要的效果，按需选就行：如果想和字体风格统一选方法一，要精准控制点的样式选方法二，容器宽度也可以根据实际场景调整，非常灵活。

备注：内容来源于stack exchange，提问作者Patrick