围绕中心字母格式化单词答案

【问题标题】：Format words around a center letter围绕中心字母格式化单词
【发布时间】：2017-09-09 22:51:32
【问题描述】：

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

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

像打字机一样，我希望其中一个单词的特定字母（例如，“SAT”中的“S”）在容器中准确居中。我试过把这个词分成跨度，像这样：

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

现在我想将<span>A</span> 放置在包含 div 的精确中心，并将其余文本放在左右两侧（如有必要，溢出，而不是换行)。

我尝试将包含 div 的样式设置为“flex”，并告诉它使用“space-around”来证明其合理性，但这会将单词展开。我还尝试使用“margin 0”设置中心跨度的样式，但由于某种原因，这并没有使该 div 居中。

有人可以帮我实现我所描述的这种效果吗？

【问题讨论】：

不清楚。您可以发布插图或您尝试过的完整代码吗？（我不知道打字机如何对齐文本；我从 WordPerfect 开始。）
我在使用打字机的时候就在身边 :) .. 我们在学校学会了如何使用它们 .... flexbox 比较麻烦 :)，那么这样的事情呢？ jsfiddle.net/myh2n9hz

标签： html css flexbox

【解决方案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%);
}

&lt;div class="type"&gt;HUMPTY&lt;/div&gt;

【讨论】：

超级有帮助，谢谢！另一个答案更适合我。

【解决方案2】：

现在我想将 A 放置在包含 div 的精确中心，然后让其余的文本分别位于左侧和右侧 [...]

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

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;
}

<div><span>HUMPTY DUMPTY S</span><span class="centered">A</span><span>T</span></div>

<p>center</p>

【讨论】：

谢谢。我添加了更多样式，但这让我继续前进（特别是 flex-basis 的东西）

【解决方案3】：

一个小技巧

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

CSS

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

el fidlé

这不是一个真正的答案，因为它只适用于 1 行，但也许你可以从那里把它带到某个地方。

【讨论】：