white-space:pre does not work with contenteditable - css

Question

I am trying to prevent a contenteditable div from word wrapping.
The white-space: pre property does not work for a contenteditable.
This is the css:
.preDiv{
border:1px solid blue;
overflow:auto;
width:100px;
white-space:pre;
}
Here is a fiddle:contentEditable-fiddle
I want it to work the way it does as if it wasn't a contenteditable.
I need this because, in my real code the div has line numbers next to it and they are no longer correct when the div starts word-wrapping, when the width of the div changes.
I have tried to use white-space:nowrap but then the entire text is set on one line.
Does anyone have an idea how I can prevent this rearranging of the text when the width changes?

Answer 1

Luckily the answer was out there on this fiddle:contenteditable with white-space pre
This is the CSS this person used:
#editor {
border: 1px solid black;
height: 200px;
width: 300px;
white-space: pre;
word-wrap: normal;
overflow-x: auto;
}
So it needed the extra: word-wrap: normal;
Thank you Rick for your help, it boosts the morale!

Answer 2

Really interesting question.
I've gotten it to work in Chrome (at least) by:
Putting preDiv in a wrapper element.
Moving the overflow style to the wrapper.
Adding display: table-cell; to preDiv.
No idea why #3 is needed. I got there through trial and error.
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>