如何为长度可变的inline/inline-block标题填充div剩余水平空间？

核心实现代码 #

HTML结构：

<div class="title-container">
  <h3>这是一个长度不固定的标题</h3>
  <span class="fill-dash"></span>
</div>

CSS样式：

.title-container {
  display: flex;
  align-items: center;
  width: 100%; /* 占满父容器宽度，不设置也可自适应 */
}

.title-container h3 {
  margin: 0;
  white-space: nowrap; /* 强制标题单行显示，如需换行可移除 */
  margin-right: 10px; /* 标题与虚线的间距，按需调整 */
}

.title-container .fill-dash {
  flex: 1;
  border-bottom: 1px dashed #666; /* 虚线样式，颜色、粗细可自定义 */
}

方案说明 #

1. 无固定宽度依赖：借助flex布局的弹性特性，容器会根据标题实际长度自动分配剩余空间给虚线元素，完全适配任意长度的标题。
2. 全浏览器兼容：flex布局支持所有现代浏览器（Chrome、Firefox、Edge等），IE11也能正常渲染，解决浏览器兼容问题。
3. 样式灵活可调：修改border-bottom属性可调整虚线颜色、粗细，甚至换成点状线（dotted）。若允许标题换行，移除white-space: nowrap即可，虚线会自动填充标题最后一行到行尾的空间。

多行标题适配方案 #

如果标题需要自动换行，且仅在最后一行末尾填充虚线，可改用表格布局方案：

<div class="title-wrap">
  <span class="title-text">这是一个可能会换行的较长标题，测试多行场景下的虚线填充效果</span>
  <span class="dash-fill"></span>
</div>

.title-wrap {
  display: table;
  width: 100%;
}

.title-text {
  display: table-cell;
  white-space: normal;
  padding-right: 10px;
}

.dash-fill {
  display: table-cell;
  overflow: hidden;
  text-align: right;
}

.dash-fill::after {
  content: "----------------------------------------------------------------------";
  color: #666;
}

该方案通过模拟表格布局，让虚线自动填充剩余空间，适配多行标题场景。

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