Is There Cross Browser Word-Wrap: Overflow-Wrap Solution

Cross-browser hinting for word break

Here's an implementation of a suggestion from @CBroe ...

.headline-container {  width: 70%;  border: 1px solid red;}.h1-line {  display: inline-block;}@media (max-width: 400px) {  .h1-line {    display: inline;  }}

<div class="headline-container">  <h1><span class="h1-line">This headline could</span> <span class="h1-line">wrap in the middle</span></h1></div>

Css: overflow-wrap: break-word; word-wrap: break-word; Differences

There is no difference between the two. overflow-wrap is the same as word-wrap. As you pointed out, word-wrap was renamed to overflow-wrap as this Post shows.

CSS word-break does not work correctly in Microsoft edge

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.

Cross-browser word-break - doesn't work in Opera 12

As of Opera 13 your CSS works, see http://caniuse.com/word-break. But there is no support for this rule in Opera 12.

The better solution would be hypenation. But this works even less via CSS, see http://caniuse.com/css-hyphens.

So my best guess: You may want to use Javascript like https://code.google.com/p/hyphenator/ to add hyphens to your text.

cross browser nowrap textarea

All I did was remove your white-space: nowrap; and it works :).

textarea{overflow: auto;}

<textarea wrap="off">Lorem asldm,és améld masémd éasmdá qw3őri2ő3pjm powemfnsd fdsf lsdmflkms dlkfmsldk mflksdmfk lmsklf</textarea>

Word wrap a link so it doesn't overflow its parent div width

The following is a cross browser compatible solution:

#permalink_section
{
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

From How do I wrap text with no whitespace inside a <td>?

Check working example here.

How to word wrap text in HTML?

Try this:

div {
    width: 200px;
    word-wrap: break-word;
}