50

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;
wesley
  • 553
  • 1
  • 4
  • 9
  • No repro. You're not showing something or you are mistaken. –  Nov 22 '13 at 16:31
  • 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. – Jukka K. Korpela Nov 22 '13 at 17:02
  • 9
    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. – wesley Nov 22 '13 at 17:31
  • 4
    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. – Jean-François Beauchamp Nov 25 '13 at 18:29

8 Answers8

84

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.

Community
  • 1
  • 1
johnkavanagh
  • 4,614
  • 2
  • 25
  • 37
  • textarea { white-space: pre-wrap; } In CSS solved my problem, thanks! – brz Jun 13 '14 at 09:36
  • 1
    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. – Sun Jun 11 '15 at 17:19
  • using this for displaying readonly input it has the caveat of interpreting white space at the start of the string. – Ricardo Saracino May 22 '19 at 16:20
15

add CSS 

 {width: 100%}

this will wrap the text to its tag

Ylli Gashi
  • 645
  • 6
  • 13
7

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

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

bpylearner
  • 507
  • 4
  • 12
6

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

{ word-break: break-all; }
Phil
  • 1,062
  • 1
  • 17
  • 15
0

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.

BenV136
  • 319
  • 2
  • 5
0

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;
Sajith
  • 163
  • 11
0

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

Vinit Sharma
  • 1
0

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.

M letters wrap, O letters go to next line

Daniel Tonon
  • 9,261
  • 5
  • 61
  • 64