格式化中心字母周围的单词

Question

我使用reactjs来呈现看起来像是通过旧式打字机移动的文本。为了设置文本样式，我将其分为每个单词的元素，如下所示：

<div><span>HUMPTY </span><span>DUMPTY </span><span>SAT </span></div>

要像打字机一样，我希望其中一个单词的特定字母（例如，＆＃39; S＆＃39; SAT＆＃39;）完全以容器为中心。我试过把这个词打成跨度，就像这样：

<span>S</span><span>A</span><span>T</span>

现在我想把<span>A</span>放在包含div的精确中心，并让其余的文字落到左边和右边（溢出，不是包装，如有必要）。

我尝试将包含div的样式设置为＆＃34; flex＆＃34;并且告诉它与＃34; space-around＆＃34;合理，但是将这些词传播出去。我也尝试过用＃0;边距0和＃34;但由于某种原因，这并没有把这个div作为中心。

有人能帮我解决这个问题吗？

Answer 1

我不确定我完全理解你在寻找什么，但这是我想象你所描述的。我使用了text-indent和一些反复试验来进行正确的计算。其中一些可能会在不同的浏览器中降级，但您可以通过使用Google字体和style reset

来缓解这种情况。

（参见下面的工作演示）

var el = document.querySelector('.type');

function char(n){

  var indent = -1*(n-1) + (.2 * (n-1))
  //console.log(n, indent)
  el.style.textIndent = indent+'em';

}

for( var i = 1; i<el.innerText.length+1; i++ ){
  setTimeout(char.bind(this, i), 500*i)
}

body {
  font-size: 40px;
}

.type {
  width: 1.6em;
  padding-left: 1em;
  border: solid 1px;
  font-family: monospace;
  letter-spacing: .2em;
  
  background: linear-gradient(to right, #fff 50%, #eee 50%);
}

<div class="type">HUMPTY</div>

Answer 2

  

现在我想把A放在包含div的精确中心，并让剩下的文字落在左边和右边[...]

不是使用flexbox的专家，但至少我通过将文本分成三个部分并使用flex-basis属性来完成这部分工作。可能需要对包装部件进行一些微调，以及正确处理部件之间的间距。

＆＃13;

＆＃13;

source.h

＆＃13;

div {
  font-family: monospace;
  font-size: 2em;
  display: flex;
}

span:first-child,
span:last-child {
  flex-basis: 50%;
}

span:first-child {
  text-align: right;
}

/* from here for demo purposes only */

span.centered {
  color: red;
}

p {
  text-align: center;
}

p:before {
  content: "";
  display: block;
  margin: 0px auto;
  height: 15px;
  width: 2px;
  background: red;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

一个小黑客

<div class="bla" contenteditable>
bla
</div>

CSS

.bla {
  width: 51%;
  text-align: right;
}

el fidlé

不是真正的答案，因为只适用于1行，但也许你可以从那里拿到它。