Javascript 为什么溢出没有在textarea中执行？

在下面的示例中，我尝试在文本框之外水平书写。这些行很长，因此应该创建一个滚动条。有些东西坏了，有人能帮我吗？谢谢

我还有一个不完整的代码在里面，我还在努力。是关于一条线和一个计时器的

关于行式书写器，我注意到，由于写了很多行，计算机的速度越来越慢。有必要经常删除这里的记忆吗

var btnWrite=document.getElementById（“writeElement”）；
var btnStop=document.getElementById（“stopElement”）；
var btnClear=document.getElementById（“clearElement”）；
btnWrite.addEventListener（“单击”，写入数据）；
btnStop.addEventListener（“单击”，停止文本）；
btnClear.addEventListener（“单击”，明文）；
textareaStatus=document.body.appendChild（document.createElement（'textarea'））；
var定时器=null；
函数writeData（）{
变量文本=（“1111111111”+“+”2222222”+“+”3333333”+“+”44444444”+“+”55555555”+“+”66666666“+”+“+”777777“+”\n”）；
定时器=设置超时（写入数据，1000）；
textareaStatus.value+=文本；
startTimer（）；
}
函数stopText（）{
清除超时（计时器）；
//停止计时器（）；
}
函数clearText（）{
textareaStatus.value=''；
clearTimer（）；
}
函数计数（）{
换行符=（this）.val（）.split（“\n”）.length；
linesUsed.text（换行符）；
}
函数startTimer（）{
var-sec=0；
功能板（val）{
返回值>9？值：“0”+值；
}
var timer=setInterval（函数（）{
//document.getElementById（“tenthssseconds”）.innerHTML=pad（parseInt（sec/60100））；
document.getElementById（“秒”）.innerHTML=pad（++秒%60）；
document.getElementById（“分钟”）.innerHTML=pad（parseInt（sec/60，10））；
}, 1000);
};
函数stopTimer（）{}
函数clearTimer（）{
清除间隔（计时器）；
//计时器=''；
}

textarea{
显示：块；
字体大小：小；
颜色：#ffffff；
边缘顶部：10px；
左边距：0px；
宽度：510px；
高度：140像素；
溢出-x：滚动；
溢出x：隐藏；
背景：黑色；
}

写入
停止
清楚的
使用的行数：0
00:00:00

用于阻止您的线路中断到下一行

用于根据需要自动添加滚动条

textarea {
  display: block;
  font-size: small;
  color: #ffffff;
  margin-top: 10px;
  margin-left: 0px;
  width: 510px;
  height: 140px;
  overflow: auto;
  white-space: nowrap;
  background: black;
}

---

例子

var btnWrite=document.getElementById（“writeElement”）；
var btnStop=document.getElementById（“stopElement”）；
var btnClear=document.getElementById（“clearElement”）；
btnWrite.addEventListener（“单击”，写入数据）；
btnStop.addEventListener（“单击”，停止文本）；
btnClear.addEventListener（“单击”，明文）；
textareaStatus=document.body.appendChild（document.createElement（'textarea'））；
var定时器=null；
函数writeData（）{
变量文本=（“1111111111”+“+”2222222”+“+”3333333”+“+”44444444”+“+”55555555”+“+”66666666“+”+“+”777777“+”\n”）；
定时器=设置超时（写入数据，1000）；
textareaStatus.value+=文本；
startTimer（）；
}
函数stopText（）{
清除超时（计时器）；
//停止计时器（）；
}
函数clearText（）{
textareaStatus.value=''；
clearTimer（）；
}
函数计数（）{
换行符=（this）.val（）.split（“\n”）.length；
linesUsed.text（换行符）；
}
函数startTimer（）{
var-sec=0；
功能板（val）{
返回值>9？值：“0”+值；
}
var timer=setInterval（函数（）{
//document.getElementById（“tenthssseconds”）.innerHTML=pad（parseInt（sec/60100））；
document.getElementById（“秒”）.innerHTML=pad（++秒%60）；
document.getElementById（“分钟”）.innerHTML=pad（parseInt（sec/60，10））；
}, 1000);
};
函数stopTimer（）{}
函数clearTimer（）{
清除间隔（计时器）；
//计时器=''；
}

textarea{
显示：块；
字体大小：小；
颜色：#ffffff；
边缘顶部：10px；
左边距：0px；
宽度：510px；
高度：140像素；
溢出：自动；
空白：nowrap；
背景：黑色；
}

写入
停止
清楚的
使用的行数：
0
00:
00:
00

如果要在x轴上显示滚动条，应设置

overflow-x: scroll; 

在你的文本区域。目前你有两个

overflow-x: scroll;
overflow-x: hidden; 

---

第二个正在覆盖第一个。

您的浏览器将变慢，因为文本区域中记录了更多的行，因为它会不断写入DOM中的该对象。我从未见过文本区域具有水平滚动。使用不同的元素，如

@charlietfl谢谢你的提示，你认为不是吗；把所有的东西都写在一行上。目标是一行一行地写。每一行都应该写在下面。因为它们很长，它们必须覆盖水平区域，否则它们将被切断。因为第二个问题：DOM是否可以持续清理？@Master Yoda我在行的末尾添加了“\n”，但空格：nowrap忽略了它。是否有创建换行符的解决方案？@JaDoLo可能您的浏览器不支持

空白

。尝试

换行：断开单词作为替代方案。DOM可以随着您的操作进行清理，但是您的问题涉及到必须在textarea增长时清除其值。我想一旦你达到一个限制，你可以清除一定数量的字符，但这有点违背了写日志的目的。@Yoda大师，谢谢你的回答。我已经测试过了，但它与我想要的正好相反。该行应该继续写到末尾，而不是打断textarea边缘的值。因此，超出文本区域的限制，到行的末尾（“\n”）。只有到那时才应该断线。谢谢你的回答。我已经试过了，但没有成功。@Mikey他们当然是对的。我也这么想，只是水平的。