Search code examples
csscontenteditablepre

white-space:pre does not work with contenteditable

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?

Solution

  • 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!