Internet Explorer 11 word wrap is not working

Question

It seems that word wrapping no longer works for textarea elements in IE 11. In IE 10 and earlier, FF, Safari, and Chrome word wrapping works as expected.

IE 11 is not implementing any word wrapping. I have tried adding "wrap=hard" to the textarea tag and also adding "word-wrap: normal;" to the CSS.

Has anyone else encountered this problem? If so, have you found a solution. Windows is pushing out this update and the inconsistent behavior is becoming a problem.

Thanks for any help you can provide.

Here is my current textarea tag

<textarea class="wrklst-report_text" id="report_text_6586427" name="report_text[6586427]" title="Report Box" data-exam_seq="6586427" style="width:95%;"></textarea>

This is my computed CSS

-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 1px;
color: rgb(0, 0, 0);
cursor: auto;
display: inline-block;
flex-direction: column;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
height: 300px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
resize: both;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
white-space: pre-wrap;
width: 950px;
word-spacing: 0px;
word-wrap: break-word;
writing-mode: lr-tb;

Lanti

No repro. You're not showing something or you are mistaken. – Detour

You need to specify actual input data that reproduces the problem, explaining what you expect to happen and what happens instead. “Not working” is not a problem description. – Gunthar

I found the problem. Thank you very much for your input. It helped a lot. It seems that IE 11 now makes textarea elements inherit the "white-space" property from its parent div. – Lanti

Wesley is right. I just encountered the same problem and setting white-space: pre-wrap;fixed the problem. The problem is not very difficult to reproduce: Create an HTML page with a textarea that has a fixed width and containing a sentence that is longer than the textarea width. Open the HTML file using IE 11 and you will see that the next is not wrapping. – Sim

Answer 1

In order to ensure that the answer is obvious to people visiting this question in the future: the OP (wesley) answered the question himself in the comments beneath the question:

The cause of the problem is that Internet Explorer 11 makes textarea elements inherit whatever white-space property is applied to the direct parent.

The resolution is to apply white-space: pre-wrap to the textarea, as identified by Jean-François Beauchamp.

Sackey

textarea { white-space: pre-wrap; } In CSS solved my problem, thanks! – Tutelary

In Maximo, there is the same issue. in the style tag just before the textarea, I had to add white-space: pre-wrap so the text area wraps correctly. -- e.g. overflow: white-space: pre-wrap;" maxlength="32000" -- Didn't have this issue in Chrome 43 and Firefox 38. – Lalia

using this for displaying readonly input it has the caveat of interpreting white space at the start of the string. – Becalmed

Answer 2

add CSS

 {width: 100%} 

this will wrap the text to its tag

Dunne

Answer 3

I got here for a different problem where word-wrap wasn't working on IE11;

The {width: 100%} solution did work for me.

Thermodynamic

Answer 4

I had a similar issue and solved it by changing the word-wrap styling to word-break styling:

{ word-break: break-all; }

Monocycle

I see you use Internet explorer to, answering after more than 3 years. – Melaniamelanic

Answer 5

Note that IE11, in compatibility mode, will not wrap lines correctly. To get at it, click Alt, Tools, Internet Options, Security, Local intranet, Sites, Advanced. See what is in that list.

Dyslogia

Answer 6

I faced a similar issue for a drop-down on IE (11.431.16299.0)and I fixed by applying both below style

white-space:pre-wrap;
word-break:break-all;

Omophagia

Answer 7

The issue was solved in IE 11 by applying the style as { word-break: break-all; }

Xylol

Answer 8

This is not an answer to your specific question.

This is a generic answer to the title of the question "Internet Explorer 11 word wrap is not working".

This was the first result in Google when searching for how to make word-wrap work in IE11 so I'm posting this answer here to help other people trying to figure out how to make word-wrap work in IE11.

---

The best CSS property to use for implementing word-wrap in a way that supports IE11 is to use this:

word-wrap: break-word;

This allows words that are too long to fit to get broken up but it still allows words that are long but not too long to be placed on the next line. It also works in ALL browsers, not just IE11 and not just in modern browsers.

In the image below, the "m" characters are one continuous long line of M's that are getting broken at the end of the line.

The "o" characters are one continuous long line of O's that are not long enough to require the word to break apart but it is long enough that the O's need to be placed on the next line.

Millais