CSS word-wrap: break-word don't work on IE9

问题:

I have a small css script that force <a> tag word-wrap in a div. It worked fine on FF, Chrome but didn't work on IE9. How can I fix it?

.tab_title a{
    word-wrap: break-word;
} 

回答1:

For a similar issue, I used display: inline-block on the <a> tag, which seems to help. And word-break: break-all as I was concerned with long URLs not wrapping.

So, this in your case essentially...

.tab_title a {
    display: inline-block;
    word-break: break-all;
} 

回答2:

This might do the trick: http://www.last-child.com/word-wrapping-for-internet-explorer/

Another post also suggests applying word-break:break-all and word-wrap:break-word to it.

回答3:

Try this:

.tab_title a{
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
} 

回答4:

For me it worked in both Chrome and IE with:

.word-hyphen-break {
  word-break: break-word;
  word-wrap: break-word;
  width: 100%;
}

like this no need to configure specific width.

回答5:

word-wrap: word-break; works only in ff and chrome and not in IE8 and IE9.
word-break: break-all; does not work either.

回答6:

I remove the anchor tag after .tab_title class and it works

回答7:

I have had good success in Chrome, Firefox and IE with using:

word-break: break-word;
word-wrap: break-word;

In my problem case I was using:

display: table-cell;

and I ended up having to include

max-width: 440px;

to get wrapping in all browsers. In most cases the max-width was not necessary. Using

word-break: break-all;

does not work well in IE because although long words without spaces will be wrapped, short words also stop wrapping at spaces.

回答8:

I recently was fighting this in Angular between IE/Edge & Chrome. Here is what I found worked for me

  overflow-wrap: break-word;
  word-wrap: break-word;

This gave me the best of both. It would break the word that was too long, but unlike word-break it would not break mid-word.

回答9:

i just figured out that word-wrap:break-word works only partially in IE8 and IE9. If I have a string of words with spaces, then that string gets wrapped. But if my string consists of one long word, it forces the parent/container element to expand according to its width