如何使用 CSS 截断长字符串并在浏览器中显示省略号？

使用 CSS 截断长字符串：跨浏览器解决方案

截断动态文本以适应固定布局可能是一个挑战。没有本机 CSS 属性提供对截断文本和显示省略号的跨浏览器支持。然而，创造性的解决方法可以实现此功能。

Justin Maxwell 的省略技术

Justin Maxwell 开发了一种跨浏览器工作的 CSS 解决方案，但它有一个限制：不允许在 Firefox 中选择文本。

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml 文件包含实现省略号功能的 XBL 标记。

更新节点内容

在 Firefox 中，使用 innerHTML 更新节点内容可能会破坏省略号功能。要解决此问题，请使用以下代码：

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    // Check for the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
}

注意： 文本溢出：现在 Firefox 7 原生支持省略号。此更新是一项值得欢迎的改进，但交叉浏览器 CSS 解决方案对于旧版浏览器仍然是有用的参考。

以上是如何使用 CSS 截断长字符串并在浏览器中显示省略号？的详细内容。更多信息请关注PHP中文网其他相关文章！