javascript - CSS letter-spacing 和 line-through

Question

有没有任何 css/js 解决方案如何在使用 letter-spacing 时使文本居中？ ？虽然单行文本可以实现居中 line-through感谢伪元素 ::before或 ::after ，但这在像 <p> 这样的 block 元素上是不可能的或 <div> .

h2, p {
  letter-spacing: 1em;
  text-decoration: line-through;
  text-align: center;
}

p {
  letter-spacing: .5em;
}

<h2>Random text</h2>
<p>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.</p>

Answer 1

这是一个可以依赖背景和 box-decoration-break 的想法创建直通线，您可以轻松调整其大小和位置。您基本上将从总宽度中删除一个字母间距。

重要的是要注意背景需要应用于内联元素:

p {
  letter-spacing: .5em;
  text-align:center;
}

p span {
  background:    
    linear-gradient(#000,#000) /* Coloration */
    0 calc(50% + 0.2ex) /* position */
    /
    calc(100% - .5em) 1px  /* width height */
    no-repeat;
 -webkit-box-decoration-break: clone;
  box-decoration-break: clone; 
}

<p><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>