如何防止IE Con​​tent Editable div中的自动换行？

Question

The Problem

I have a div that has contenteditable set to true . In Chrome, when the edge of the div is reached while typing, it shifts the entire word to the next line as expected. I present Exhibit A:

IE, as usual, doesn't behave as expected. When the edge of the div is reached while typing it breaks the word. I present Exhibit B:

The HTML

A simple div , with the contenteditable set to true:

<div id='bioEntryContainer' contenteditable='true' class='form-control'></div>

The CSS

The form-control is from Twitter's Bootstrap CSS. The custom styles are:

#bioEntryContainer { min-height:74px; overflow:auto; }

Attempts to Fix

I've tried the following with CSS, with no luck:

overflow:hidden;
overflow-x:hidden;
white-space:nowrap;
white-space:pre;
display:inline-block; 

I've tried the route suggested in this question , but it didn't work. Any other suggestions?

Update

I created a fiddle to demo the problem, but I can't recreate it there. I've included the Bootstrap CSS to get it as close to the actual environment as possible.

The div is added in the Bootstrap Modal with JS. I'm not sure how that could change things, but hopefully that provides more background information.

Answer 1

Which IE versions have you tried so far?

I've tried it in IE 9-11 and no such problem persists.

Try setting

word-wrap:break-word;

in your css style.