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;

Answer 1

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.

Answer 2

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

Answer 3

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;

Answer 4

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

{ word-break: break-all; }

Answer 5

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

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

Answer 6

add CSS

 {width: 100%} 

this will wrap the text to its tag

Answer 7

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.

Answer 8

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.