white-space:pre 不适用于 contenteditable

Question

我正在尝试防止内容可编辑的 div 自动换行。 white-space: pre 属性不适用于 contenteditable。这是 css:

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

这是一个fiddle:contentEditable-fiddle

我希望它按照它的方式工作，就好像它不是一个 contenteditable 一样。

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

我试过使用 white-space:nowrap 但是整个文本都设置在一行上。

有谁知道如何在宽度改变时防止重新排列文本？

Answer 1

非常有趣的问题。

我已经让它在 Chrome 中工作（至少）通过：

将 preDiv 放入包装器元素中。
将 overflow 样式移动到包装器。
将 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>

Answer 2

幸运的是，这个问题的答案就在那里 fiddle:contenteditable with white-space pre

这是CSS这个人用过的：

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

所以它需要额外的：word-wrap: normal;

谢谢瑞克的帮助，鼓舞了士气！

white-space:pre 不适用于 contenteditable

white-space:pre does not work with contenteditable

css

pre

contenteditable