CSS Flex布局下如何用点号填充多行段落最后一行剩余宽度

原单行flex方案无法适配多行场景的核心问题是：普通块级容器内的文本折行是浏览器自动计算的流布局，无法单独定位最后一行的尾部空间做填充，只要把文本容器改为支持换行的flex布局，就能让Paper标签和填充元素自动挤到最后一行，完美适配宽度变化。

核心改动点 #

• 修正原HTML语法错误：第一个<p>的闭合标签误写为起始标签，需改为</p>
• 承载长文本的第一个<p>设置为可换行flex容器，内部元素沿底部对齐
• 包裹Paper的<span>设置为flex项并开启flex-grow，自动占满所在行的剩余横向空间
• 给Paper的span添加::after伪元素作为点号载体，通过flex-grow撑满Paper文字后的剩余空间，用点状边框实现连续点效果，宽度自动适配

完整代码 #

div {
  display: flex;
  border: 0.1rem solid black;
  max-width: 300px;
  justify-content: space-between;
  align-items: end;
  padding: 0.4rem;
}

div > p:first-child {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 0;
}

div > p:last-child {
  flex: 0 0 auto;
  margin: 0 0 0 0.5rem;
}

div > p > span {
  margin-left: 1.0rem;
  display: flex;
  flex-grow: 1;
  align-items: baseline;
}

div > p > span::after {
  content: '';
  flex-grow: 1;
  margin: 0 0.3rem 0.2rem 0.3rem;
  /* 可根据需求调整点的大小、颜色 */
  border-bottom: 2px dotted #212121;
}

<div>
  <p>This is a long title that spans two lines in the container.<span>Paper</span></p>
  <p>.75</p>
</div>

效果特性 #

• 单行场景下和原有flex方案表现完全一致，点号自动填满Paper右侧空间
• 多行折行时，Paper标签会被流自动挤到最后一行，点号仅填充最后一行的剩余空间，不会出现在中间行
• 容器宽度、视口尺寸变化时，点号长度会自动重算适配，不需要额外JS逻辑
• 如果需要点号填充到容器最右边缘，直接移除右侧价格的<p>标签即可，不需要改动其他样式；如果需要调整点的疏密、垂直位置，修改伪元素的margin、border属性即可。

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