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](http://jsfiddle.net/jenietos/fxh3qqgc/2/)

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: 
Luckily the answer was out there on this fiddle:[contenteditable with white-space pre](http://jsfiddle.net/cirosantilli/eaxgesoq/)

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!
Really interesting question.

I've gotten it to work in Chrome (at least) by:

1. Putting `preDiv` in a wrapper element.
2. Moving the `overflow` style to the wrapper.
3. Adding `display: table-cell;` to `preDiv`.

No idea why #3 is needed. I got there through trial and error.

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

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

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

```html
<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>
```