Menu
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; 
464
Windows Internet Explorer 8. The -ms-word-wrap attribute is an extension to CSS, and can be used as a synonym for word-wrap in IE8 Standards mode. Use this property to enable the browser to break up otherwise unbreakable strings. This differs from the white-space property, which turns wrapping of the text on and off.
Enable or disable text wrapping for a text box, rich text box, or expression box. Right-click the control for which you want to enable or disable text wrapping, and then click Control Properties on the shortcut menu. Click the Display tab. Select or clear the Wrap text check box.
The correct answer is Word Wrap. Word Wrap is the tool used to wrap text to the next line as it reaches the right margin in MS Word. When the right margin is reached while typing, a word processor's Word Wrap feature will automatically force content to a new line.
IE 11 and Edge inherits the white-space property from its parent. So, if text overflows in these browsers, it won’t wrap in the box. <textarea rows="4" cols="50">Lots of text ...</textarea>
applying word-wrap property to parent of the concerned element will resolved the problem in IE9. Share Follow answered Aug 5 '13 at 12:09 mukeshmukesh 15111 silver badge33 bronze badges
Internet Explorer 11 and Edge work in a different way with fixed width text boxes (see examples below) than previous versions earlier than 11. IE 11 and Edge inherits the white-space property from its parent. So, if text overflows in these browsers, it won’t wrap in the box.
This can be fixed by applying the following CSS to the text box: Now overflowing text will wrap in the box in all IE and Edge versions.
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.
60
add CSS
{width: 100%} this will wrap the text to its tag
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With