white-space：pre不适用于contenteditable

Question

我正在尝试阻止contenteditable div换行。空格：pre属性不适用于contenteditable。这是CSS：

.preDiv{
border:1px solid blue;
overflow:auto;
width:100px;
white-space:pre;
}

这里是小提琴：contentEditable-fiddle

我希望它像它不是可编辑内容一样工作。

我需要这个，因为在我的真实代码中div旁边有行号，并且当div的宽度改变时，当div开始自动换行时，它们不再正确。

我曾尝试使用white-space：nowrap，但随后将整个文本设置在一行上。

有人知道当宽度改变时如何防止文本重新排列吗？

Answer 1

幸运的是，答案是关于这个小提琴的：contenteditable with white-space pre

这是此人使用的CSS：

#editor {
border: 1px solid black;
height: 200px;
width: 300px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}

所以它需要额外的：自动换行：正常；

谢谢Rick的帮助，它提高了士气！

Answer 2

非常有趣的问题。

我已经通过（至少）通过以下方式使它可以在Chrome中运行：

1. 将preDiv放入包装器元素。
2. 将overflow样式移到包装器。
3. 将display: table-cell;添加到preDiv。

不知道为什么需要＃3。我经过反复试验到达那里。

changeWidth=function(){
  document.getElementById('wrapper').style.width='100px';
}

#wrapper {
  overflow:auto;
  border:1px solid blue;
}

#preDiv{
  width: 500px;
  white-space: pre;
  display: table-cell;
}

<div contenteditable id="wrapper">
<div id='preDiv'>
<span>hello hello hello hello</span>
<span>Here I am, Here I am,Here I am,Here I am,</span>
and so forth, and so forth and so forth
</div>
</div>

<button onclick='changeWidth()'>change Width</button>