围绕字符串中间字符的居中文本

Question

我有一个包含一些文本的元素，并希望以最中心的字符应位于元素中间的方式将文本居中。例如。给定字符串“ iiiii | MMMMM”，“ |”是最中心的字符，但采用非等宽字体，如果正常居中，则为最左边。 “ |”不论其他字符的字符宽度如何，都应位于元素的中心。该元素也是一个输入，因此我无法将字符串分成其char。

希望您有一些想法，并先谢谢您。

Answer 1

您必须在不切断字符串的情况下对齐字符。

.text-wrap{
  width: 400px;
  box-shadow: 0 0 3px orange;
  font-size: 0;
}
.text-wrap span {
  display: inline-block;
  font-size: 1rem;
}
.text-wrap span:nth-child(1n){
  width: calc(50% - 3px);
}
.text-wrap span:nth-child(2){
  width: 6px;
  text-align: center;
}
.text-wrap span:nth-child(1){
  text-align: right;
  text-indent: -99999px;
}

<div class="text-wrap">
    <span>aaaadddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
    <span>|</span>
    <span>bb</span>
</div>