Question

我正在尝试使用text-overflow: ellipsis截断我网站上的文字。它在Firefox中正确显示，但不在IE中显示;我已经在下面的Firefox和IE中包含了我的代码和示例：

.ellipsis {
    font-weight: bold;
    height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 150px;
}

Elippis on IE and Firefox

Answer 1

text-overflow 一直是available as of IE6，因此您无需使用Microsoft供应商前缀。但是，您可能需要Opera和Webkit的扩展，具体取决于您的站点计划支持的内容。

您正在测试哪个版本的Internet Explorer？

显然，您可以非常轻松地使用jQuery plugin来获得相同的功能，但如果IE是您唯一的问题，则不需要，因为如上所述，它应该支持该功能。

以下是使用此功能的代码的简单复制：

<!DOCTYPE html>
<html>
<head>
    <title>text-overflow: ellipsis</title>
    <style type="text/css">
    .ellipsis { 
        height: 1.2em; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap; 
        width: 150px; 
    } 
    </style>
</head>
<body>
    <div class="ellipsis">
            This is a test of the less-than-emergency 
            broadcast system. This is only a test.
    </div>
</body>
</html>

Answer 2

我找到了解决方案，因为我使用标签来包装div标签，因此IE工作得不好。

我将标签移到了div标签内部，效果很好。感谢大家的帮助。

省略号在Internet Explorer上运行不正常

2 个答案: