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.
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.
add CSS
{width: 100%}
this will wrap the text to its tag
The example you are using as your "proper break" from CSS-Tricks (https://css-tricks.com/almanac/properties/o/overflow-wrap/) has a non breaking space between 'Word' and the long word, making it a single word to break up, hence the difference you see between where the word breaks in your code and the example.
<p>This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one.</p>
remove that extra non breaking space and the word break happens how it does in your demo. https://codepen.io/rlemon/pen/MWgxXmK
so to solve your problem, add back in the non breaking space and let it treat those two words as one.
First of all, you're applying these properties to all elements with the.div class, not the div element itself. Remove the dot ('.') on the CSS selector.
If it still doesn't work, use the HTML entitie ­. Its an hypen that doesn't appear until the word is broken. This is great, so you can tell the browser where it should break (same as <wbr>, but with hypen).
Example:
<div>
This is the first time I've seen the word
­ultra­microscopic­silico­volcano­coniosis. It's a long one.
</div>
Hope this helps!
Add this to your code:
.child { width: 100%; }
We know that a block-level child is supposed to occupy the full width of the parent.
Chrome understands this.
IE11, for whatever reason, wants an explicit request.
Using flex-basis: 100% or flex: 1 also works.
.parent {
display: flex;
flex-direction: column;
width: 400px;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
width: calc(100% - 2px); /* NEW; used calc to adjust for parent borders */
}<div class="parent">
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>Note: Sometimes it will be necessary to sort through the various levels of the HTML structure to pinpoint which container gets the width: 100%. CSS wrap text not working in IE
I had the same issue and the point is that the element was not adapting its width to the container.
Instead of using width:100%, be consistent (don't mix the floating model and the flex model) and use flex by adding this:
.child { align-self: stretch; }
Or:
.parent { align-items: stretch; }
This worked for me.
As word-wrap is a CSS3 property, it is only supported by IE9 and higher. For IE8 try
-ms-word-wrap
So try
div.break_word {
width: 690px;
word-wrap: break-word;
-ms-word-wrap: break-word;
}
Hope this helps.
Update
It seems that even if you use -ms-word-wrap in IE7, it defaults the white-space: nowrap; which then overrides the word-wrap property.
Once again a IE hack is required. Try adding this for IE7.
white-space: normal;
Your p within div works fine even in IE6. Your div within pre is invalid HTML.
word-break: break-word is deprecated, and not supported by MS Edge or MS IE. See mozilla documentation about this.
word-break is supported by MS Edge and MS IE Here is a list of supported browsers.
Valid MS Edge and MS IE word-break properties are:
word-break: normal|break-all|keep-all|initial|inherit|unset;
Alternatively mozilla documentation specifies that overflow-wrap: break-word; acts the way that you want word-break: break-word to function.
An alternative solution is to make use of the word-wrap property which IMHO behaves more 'intelligently' - meaning the word break will only be applied when the word is too long to fit into a line width, and won't be applied to words that can simply be moved in whole to the next line.
CSS:
word-wrap: break-word;
The word-wrap property is supported by most browsers and as of today I can certainly confirm it works in Microsoft Edge, IE11, Chrome, Firefox, Opera and Safari.
Note, word-wrap has now been renamed to overflow-wrap, with word-wrap now being an alternative name for that property, however overflow-wrap is not understood by Microsoft Edge so stick with using word-wrap for cross-browser compatability.