个人中心
gpt4 book ai didi

javascript - 为不同的字母设置适当的边距？

转载 作者：太空宇宙 更新时间：2023-11-04 08:11:03 25 4
gpt4 key购买 nike

有些字母在显示时比其他字母占用更大的空间，那么如何让像下面这样的情况下的空白自动适当调整？

在这段代码中，如何自动调整'#re1'和'#re2之间的边距？这样我就不会出现下面的情况了，

enter image description here

enter image description here

如果我根据字母表“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/

25 4 0
文章推荐： python - pyzmq Tornado ioloop : how to handle KeyboardInterrupt gracefully?
文章推荐： java - 如何强制文本显示在标题下方？
文章推荐： python - 单个语句中的多个递归
文章推荐： java - Mongodb文档检索
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com