CODEWITHSUNDEEP
csscontenteditablepre
Jenita
Jenita

Reputation: 291

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?

Upvotes: 3

Views: 2503

Answers (2)

Jenita
Jenita

Reputation: 291

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!

Upvotes: 4

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

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.

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>

Upvotes: 2

Related Questions