Question

有些字母在显示时会比其他字母占用更大的空间，那么如何在下面的情况下使空白区域得到适当的自动调整？

在这段代码中，自动调整＆＃39;＃re1＆＃39;之间的差距的方法是什么？和＆＃39;＃re2？所以我不会遇到以下情况，

如果我根据字母表设置边距＆＃39; m＆＃39;那么当我输入＆＃39; a＆＃39;时，其间的空格对我来说太大了。

＆＃13;

function tx() {
  var x = document.getElementById("123").value;
  document.getElementsByClassName("re")[0].innerHTML = x;
  document.getElementsByClassName("re")[1].innerHTML = x;
}

＆＃13;

#re1 {
  width: 200px;
  word-wrap: break-word;
  height: 20px;
}

#re2 {
  width: 150px;
  word-wrap: break-word;
  height: 20px;
  margin-top: 3px;
}

＆＃13;

<!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>

＆＃13;

Answer 1

使用line-height。

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>

Answer 2

试试这个代码段：

#re1 {
position:relative;      //add
width: 200px;           //remove
word-wrap: break-word;
height: 20px;
}

Answer 3

删除高度属性

＆＃13;

function tx() {
  var x = document.getElementById("123").value;
  document.getElementsByClassName("re")[0].innerHTML = x;
  document.getElementsByClassName("re")[1].innerHTML = x;
}

＆＃13;

#re1 {
  width: 200px;
  word-wrap: break-word;
}

#re2 {
  width: 150px;
  word-wrap: break-word;
  margin-top: 3px;
}

＆＃13;

<!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>

＆＃13;

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

3 个答案: