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，width，text-overflow，overflow和white-space直接应用到锚本身而没有额外的运气。我在这做错了什么？什么是部分字包装？当然一切都是镀铬/火狐的犹太洁食。 Doctype 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;
}

奇怪的文本包装问题，即9和10。

2 个答案: