最轻量且兼容性好的方案是用flex-grow撑开伪元素空间并配合::before/::after实现文字居中、线铺满两端，关键在于flex:1（含flex-basis:0）确保均分剩余空间，避免border或background干扰盒模型与布局。
直接用 flex-grow 撑开伪元素空间、配合 ::before/::after 实现“文字居中、线铺满两端”的效果，是目前最轻量且兼容性好的方案。关键不在“怎么加线”，而在于“怎么让线不抢位、不溢出、不模糊”。
为什么不能只靠 border 或 background 直接画线
在 Flex 容器里给子元素加 border-right 会参与盒模型计算，干扰 flex-grow 的实际占比；用 background 填充整个子项又容易撑高容器或和文字重叠。更糟的是，如果文字换行，border 还会出现在行尾——这不是分割线，是 bug。
-
border改变元素尺寸，破坏justify-content: space-between的对齐预期 -
background需手动控制高度和位置，多行文本时无法自适应 - 纯 DOM 元素（如额外
<div class="line">）增加语义冗余，不利于维护 <h3> <code>::before和::after必须设flex: 1而不是flex-grow: 1flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0的简写，其中flex-basis: 0才是关键——它让伪元素从“零宽度”开始生长，真正把剩余空间均分。只写flex-grow: 1会保留默认flex-basis: auto，导致两侧行为不一致，尤其在 Safari 中线长明显不对等。- 正确写法：
.title::before, .title::after { content: ""; flex: 1; height: 1px; background: #e0e0e0; } - 错误写法：
flex-grow: 1单独使用，没重置flex-basis - 若需留空隙，用
margin（如margin-right: 8px），别用padding，否则影响 flex 分布
文字如何不被拉伸、不溢出、还能垂直居中
容器设
display: flex+align-items: center后，文字本身不需要额外定位。但必须注意两点：一是文字不能是容器的直接文本节点（会触发匿名块，破坏 flex 子项逻辑），二是长文本必须截断或换行控制。- HTML 结构要包裹一层
<span></span>：<div class="title"><span>我的文字</span></div> - 文字容器加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止撑破布局 - 若允许多行，改用
white-space: normal; word-break: break-word;，并确保父容器有明确height或max-height - 千万别给文字元素设
flex相关属性，它只是普通子项，不是“用来撑空间”的
高 DPI 屏幕下 1px 线变粗或发虚怎么办
iPhone、MacBook 等设备 DPR > 1 时，
height: 1px+background渲染出来其实是 2px，用transform: scaleY(0.5)又容易模糊。最稳的解法是换用box-shadow模拟单像素线。- 推荐写法：
box-shadow: 1px 0 0 #e0e0e0;（右侧线）或box-shadow: -1px 0 0 #e0e0e0;（左侧线） - 避免
border-image或linear-gradient，它们在部分安卓 WebView 中渲染异常 - 如果必须用
background，可加媒体查询：@media (-webkit-min-device-pixel-ratio: 2) { ... height: 0.5px; }，但支持度有限，不如box-shadow可靠
真正容易被忽略的点是：伪元素必须和文字同级参与 flex 排列，且不能有任何隐式尺寸干扰；
flex-basis: 0是对齐前提，不是可选项；高 DPI 下的线质量，本质是渲染引擎问题，不是 CSS 写法问题——选对替代方案比硬调transform更有效。 - 正确写法：
