使用letter-spacing时，如何通过CSS/JS实现文本贯穿线居中？

这个场景我太熟悉了！单行文本用伪元素做居中的贯穿线很顺手，但碰到<p>、<div>这类多行块级元素时，默认的text-decoration: line-through会给每行都加一条线，完全达不到“整个块居中贯穿”的效果。下面给你几个实用的CSS/JS解决方案：

方案一：CSS绝对定位伪元素（最推荐） #

这个方法利用相对定位+绝对定位，让贯穿线始终处于块级元素的垂直中心，不管内容有多少行都能适配。

代码实现 #

/* 给目标元素设置相对定位 */
.centered-strike {
  position: relative;
  text-align: center;
  letter-spacing: 0.5em; /* 保留你需要的字间距 */
}

/* 创建居中的贯穿线 */
.centered-strike::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor; /* 自动继承文字颜色，不用单独设置 */
  transform: translateY(-50%); /* 精准垂直居中 */
}

/* 用span包裹文字，避免横线覆盖文字 */
.centered-strike span {
  background-color: #fff; /* 匹配你的页面背景色 */
  padding: 0 0.5em; /* 给文字左右留点空间，避免横线贴太近 */
}

<h2 class="centered-strike"><span>Random text</span></h2>
<p class="centered-strike"><span>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</span></p>

为什么好用？ #

• 纯CSS实现，不需要JS，性能好
• 自适应元素高度，不管内容是单行还是多行都能完美居中
• 颜色自动继承，和文字风格统一

方案二：Flex布局（适合标题类场景） #

如果你的块级元素是类似标题的短文本（即使换行也不多），可以用Flex布局让横线分布在文字两侧，视觉效果更清爽。

代码实现 #

.flex-strike {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.5em;
}

/* 左右两侧的横线 */
.flex-strike::before,
.flex-strike::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: currentColor;
  margin: 0 1em; /* 横线和文字之间的间距 */
}

<h2 class="flex-strike">Random text</h2>
<p class="flex-strike"><span>Lorem ipsum dolor sit amet, at nemore aperiri cum.</span></p>

方案三：JS动态计算（适配复杂动态内容） #

如果你的内容是异步加载的，或者元素高度会动态变化，用JS计算元素高度来设置横线位置会更稳妥。

代码实现 #

.js-strike {
  position: relative;
  text-align: center;
  letter-spacing: 0.5em;
}

.js-strike .strike-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor;
  transform: translateY(-50%);
}

.js-strike span {
  background-color: #fff;
  padding: 0 0.5em;
}

// 遍历所有需要添加贯穿线的元素
document.querySelectorAll('.js-strike').forEach(el => {
  // 创建横线元素
  const strikeLine = document.createElement('span');
  strikeLine.className = 'strike-line';
  el.appendChild(strikeLine);
  
  // 计算元素垂直中心位置
  const elHeight = el.offsetHeight;
  strikeLine.style.top = `${elHeight / 2}px`;
});

// 如果内容是动态加载的，记得在内容加载完成后重新执行上面的代码

注意事项 #

• 如果内容是动态更新的，要在内容渲染完成后重新调用计算逻辑
• 可以结合MutationObserver监听元素变化，自动更新横线位置

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