css - ie 9 和 10 中奇怪的文本换行问题。

Question

我在这里有一个有趣的问题。我有一个包含在 div 中的链接。

<div class="field-content news-panel-title">
    <a href="/news/">Chiquita Fresh North America Recognizes My Company with Chiquita Green Transportation Excellence Award</a>
</div>

CSS如下：

.news-panel-title {
margin-top: 1px;
margin-left: 15px;
width: 500px;
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.2em;
}

我的问题是，在 IE 9 和 10 上（虽然在 IE 8 上很有趣），文本会在单词的中途换行。在 IE 8 上，至少整个单词是换行的。我尝试将 display:inline-block、宽度、文本溢出、溢出和空白直接应用于锚本身，没有额外的运气。我在这里做错了什么？部分自动换行是怎么回事？当然，chrome/firefox 上的一切都是犹太教。文档类型 html5。

Answer 1

你试过这个属性吗？

-ms-word-wrap: break-word;

Answer 2

尝试将 CSS 更改为以下内容：

.news-panel-title {
margin-top: 1px;
margin-left: 15px;
width: 500px;
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.2em;
word-break: break-all;
-ms-word-break: break-all;
}