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

【问题标题】：Center text around middle char of string围绕字符串的中间字符居中文本
【发布时间】：2020-04-21 17:26:02
【问题描述】：

我有一个包含一些文本的元素，并希望将元素内的文本居中，使最中心的字符应该位于元素的中间。例如。给定字符串“iiiiii|MMMMM”的“|”是最中心的字符，但在非单空间字体中 - 如果正常居中 - 更靠左。 “|”无论其他字符的字符宽度如何，都应位于元素的中心。
该元素也是一个输入，因此我无法将字符串拆分为其字符。

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

【问题讨论】：

你能分享视觉方面的要求吗？比如图片什么的
很遗憾我不会，因为我不知道如何编码
只能剪字符串，如果我输入多个|怎么办？
我不能剪弦

标签： html css centering typography html-input

【解决方案1】：

如果不剪切字符串，就无法对齐字符。

var arr = [];

var text1 = document.querySelector('#text1');
var text2 = document.querySelector('#text2');

document.querySelector('#textInput').addEventListener("input", function(){
  arr = textInput.value.split('|')
	
  text1.innerText = arr[0] || ''
  text2.innerText = arr[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 id="text1">aaaadddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
    <span>|</span>
    <span id="text2">bb</span>
</div>
<input type="text" id="textInput"/>

【讨论】：

【解决方案2】：

使用 css 弹性

.flex-row{
  display: flex;
  flex-direction: row;
}

div{
  flex: 1;
}

span{
  padding: 0 5px;
}

.text-right{
  text-align: right;
}

<div class="flex-row">
  <div class="text-right">aaaaaaaaaaaaaaaaaa</div>
  <span>|</span>
  <div>bbb</div>
</div>

【讨论】：

我有同样的想法，但我的元素是一个单一的输入，我很遗憾无法拆分