CSS 自动换行：断字在 IE9 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8394685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS word-wrap: break-word don't work on IE9
提问by hungneox
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?
我有一个小的 css 脚本，可以<a>在 div中强制标记自动换行。它在 FF、Chrome 上运行良好，但在 IE9 上不起作用。我该如何解决？
.tab_title a{
word-wrap: break-word;
}
采纳答案by hungneox
I remove the anchor tag after .tab_titleclass and it works
我在.tab_title课后删除了锚标签，它可以工作
回答by Si Clancy
For a similar issue, I used display: inline-blockon the <a>tag, which seems to help. And word-break: break-allas I was concerned with long URLs not wrapping.
对于类似的问题，我display: inline-block在<a>标签上使用过，这似乎有帮助。而word-break: break-all当我用很长的URL没有包装有关。
So, this in your case essentially...
所以，这在你的情况下基本上......
.tab_title a {
display: inline-block;
word-break: break-all;
}
回答by Duke Hall
This might do the trick: http://www.last-child.com/word-wrapping-for-internet-explorer/
这可能会奏效：http: //www.last-child.com/word-wrapping-for-internet-explorer/
Another post also suggests applying word-break:break-alland word-wrap:break-wordto it.
另一篇文章还建议采用word-break:break-all并word-wrap:break-word给它。
回答by anniete
For me it worked in both Chrome and IE with:
对我来说，它适用于 Chrome 和 IE：
.word-hyphen-break {
word-break: break-word;
word-wrap: break-word;
width: 100%;
}
like this no need to configure specific width.
像这样不需要配置特定的宽度。
回答by Danny Connell
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;
}
回答by Prachi
word-wrap: word-break;works only in ff and chrome and not in IE8 and IE9.word-break: break-all;does not work either.
word-wrap: word-break;仅适用于 ff 和 chrome，不适用于 IE8 和 IE9。word-break: break-all;也不起作用。
回答by Darren Reimer
I have had good success in Chrome, Firefox and IE with using:
我在 Chrome、Firefox 和 IE 中使用以下方法取得了成功：
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
在所有浏览器中进行包装。在大多数情况下，不需要 max-width。使用
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.
在 IE 中效果不佳，因为虽然没有空格的长词会被换行，但短词也会停止在空格处换行。
回答by GR Envoy
I recently was fighting this in Angular between IE/Edge & Chrome. Here is what I found worked for me
我最近在 IE/Edge 和 Chrome 之间的 Angular 中进行了斗争。这是我发现对我有用的东西
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.
这让我两全其美。它会断开太长的单词，但与 word-break 不同，它不会断开中间的单词。
回答by Prachi
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
我刚刚发现 word-wrap:break-word 仅在 IE8 和 IE9 中部分有效。如果我有一串带有空格的单词，那么该字符串会被包裹。但是如果我的字符串由一个长字组成，它会强制父/容器元素根据其宽度展开
