有些字母在显示时比其他字母占用更大的空间，那么如何让像下面这样的情况下的空白自动适当调整？
在这段代码中，如何自动调整'#re1'和'#re2之间的边距？这样我就不会出现下面的情况了，
如果我根据字母表“m”设置边距，那么当我输入“a”时，中间的空白对于我的目的来说太大了。
function tx() {
var x = document.getElementById("123").value;
document.getElementsByClassName("re")[0].innerHTML = x;
document.getElementsByClassName("re")[1].innerHTML = x;
}#re1 {
width: 200px;
word-wrap: break-word;
height: 20px;
}
#re2 {
width: 150px;
word-wrap: break-word;
height: 20px;
margin-top: 3px;
}<!doctype html>
<html>
<head>
<body>
<textarea id="123" onKeyUp="tx();" onKeyPress="tx();" maxlength="23"></textarea><br>
<div class="out">
<div class="re" id="re1">1</div>
<div class="re" id="re2">2</div>
</div>
</body>
</html>最佳答案
使用行高。
function tx() {
var x = document.getElementById("123").value;
document.getElementsByClassName("re")[0].innerHTML = x;
document.getElementsByClassName("re")[1].innerHTML = x;
}#re1 {
width: 200px;
word-wrap: break-word;
line-height: 110%;
}
#re2 {
width: 150px;
word-wrap: break-word;
line-height: 110%;
}<!doctype html>
<html>
<head>
</head>
<body>
<textarea id="123" onKeyUp="tx();" onKeyPress="tx();" maxlength="23"></textarea><br>
<div class="out">
<div class="re" id="re1">1</div>
<div class="re" id="re2">2</div>
</div>
</body>
</html>关于javascript - 为不同的字母设置适当的边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46293997/