Question

是否有任何CSS / JS解决方案在使用letter-spacing时如何使文本居中？尽管单行文本由于伪元素line-through或::before而可以完成居中的::after，但是在像<p>或<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>

Answer 2

您可以使用px值。

letter-spacing: 2px;

您可以使用像素值。

与内联块元素之间的空间作斗争的一种方法是在letter-spacing: -4px;元素的父容器上设置inline-block。然后，您需要在子元素上重置letter-spacing: normal;。

CSS字母间距和直行

2 个答案: