Javascript contenteditable中的空白会导致换行

当您单击以下代码段中的背景时，将创建一个

contenteditable

。试着写“你好，世界”空格会导致换行。为什么

如何使空白不再导致内容可编辑范围中的任何换行？

window.onload=function（）{
var container=document.createElement（“div”），
包装器=document.createElement（“div”）；
container.style.position=“绝对”；
wrapper.style.position=“relative”；
子容器（包装器）；
文件.正文.附件（容器）；
window.onclick=函数（e）{
var tb=document.createElement（'span'）；
tb.contentEditable=true；
tb.style.position='绝对'；
tb.style.top=e.clientY+'px'；
tb.style.left=e.clientX+'px'；
儿童（tb）；
tb.focus（）；
}
}

使用CSS

空白：pre

保留空格序列，仅在源代码中的换行符和

元素处断行

只需添加一行：

tb.style.whiteSpace = 'pre';

例如：

window.onload=function（）{
var container=document.createElement（“div”），
包装器=document.createElement（“div”）；
container.style.position=“绝对”；
wrapper.style.position=“relative”；
子容器（包装器）；
文件.正文.附件（容器）；
window.onclick=函数（e）{
var tb=document.createElement（'span'）；
tb.contentEditable=true；
tb.style.position='绝对'；
tb.style.top=e.clientY+'px'；
tb.style.left=e.clientX+'px'；
tb.style.whiteSpace='pre'；//<此处
儿童（tb）；
tb.focus（）；
}
}

谢谢@Moob！我这里有一个相关的非常棘手的问题：你知道吗？