Question

嗨，我正在努力阻止一个令人满意的div包装。 white-space：pre属性不适用于满足。这是css：

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

这是一个小提琴：contentEditable-fiddle

我希望它按照它的方式工作，好像它不是一个令人满意的。

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

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

有人知道如何在宽度变化时阻止重新排列文本吗？非常感谢， Jenita

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;
}

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

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

Answer 2

非常有趣的问题。

我已经让它在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>

white-space：pre不适用于contenteditable。

2 个答案: