white-space:pre在contenteditable中无效。

Question

我正在尝试防止一个可编辑的 div 换行。 white-space:pre 属性对于可编辑的 div 没有用。 这是 CSS：

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

这里有一个示例：可编辑内容示例 我希望它的工作方式与非可编辑状态下的相同。

这是因为，在我的实际代码中，div 旁边有行号，当 div 开始换行并且 div 的宽度发生变化时，行号就不再正确了。

我尝试使用 white-space:nowrap，但整个文本都在一行上。

是否有任何想法可以防止文本在宽度改变时重新排列？

- Jenita

Answer 1

幸运的是，这个 jsfiddle 上有答案：contenteditable with white-space pre 以下是此人使用的 CSS：

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

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

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

- Jenita

---

很高兴你找到了解决方案，而且它肯定比使用包装器更干净。你可以接受自己的答案。 - Rick Hitchcock

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>

- Rick Hitchcock

---

很抱歉，display: table-cell 不允许我设置 div 的高度，而这在我的实际代码中是必需的。我已经尝试了所有其他的 display 选项，它们都存在问题。有没有其他的解决方法？很抱歉我之前太过激动了。 - Jenita