文本溢出:省略号不适用于IE10

时间:2013-08-17 09:57:21

标签: css cross-browser internet-explorer-10 ellipse

p.details {
    font-size:     12px;
    color:         #6D6D6D;
    white-space:   nowrap;
    width:         100%;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-height:    3.6em;
    line-height:   1.8em;
    min-height:    3.6em;
}

上面的css在chrome,firefox,safari上工作正常,除了IE10。如果它太长,它应该在句子后面有一个“......”。

例如:“这些是...的详细信息”而不是“这些是促销项目的详细信息”

请帮忙!

新更新:我删除了自动换行:break-word,它适用于第一行。后续行不起作用。 例如:

<p class = "details">"- Sentence 1" <br> "- Sentence 2" </p>

这将产生:

... Senten
句子

2 个答案:

答案 0 :(得分:2)

从样式中删除以下行:

word-wrap:     break-word;

答案 1 :(得分:0)

IE10不喜欢Ellipsis的br标签。 相反,尝试使用新的div换行换行,它将开始摆动。 喜欢这个

&#34; - 句子1&#34; &#34; - 句子2&#34;