Question

为什么在textarea中输入没有任何空格，div中显示的textarea的输出将超过div的宽度？但是在用空格键入时不会发生这个问题。

＆＃13;

function grab(){
        var x= document.getElementById("text").value;
         document.getElementById("replace").innerHTML = x;

        }

＆＃13;

 <body>  
 <form>
 <textarea id="text" onKeyUp="grab();" onKeyPress="grab();"></textarea><br>
 </form>
 <div id="replace" style="height: 20px; width: 100px;">1</div><br>
 </body>

＆＃13;

Answer 1

由于你的单词之间没有添加空格，所以在div之外的overflows文本没有添加换行符，所以要解决这个问题，你可以添加CSS word-wrap属性来打破{{1并在它到达div的末尾时将其包装到下一行。

自动换行 -

自动换行属性允许长字可以被破坏   换行到下一行。

long word

function grab() {
  var x = document.getElementById("text").value;
  document.getElementById("replace").innerHTML = x;
}

var ta = document.querySelector("form > textarea");
ta.addEventListener("keyup", grab);

#replace {
  width: 200px;
  height: 100px;
  border: solid;
  word-wrap: break-word;
}

当在textarea中没有任何空格的情况下继续输入时，div中显示的textarea的显示将超过div的宽度？

1 个答案: