用 CSS 截断长字符串：可行吗？

小编典典

用 CSS 截断长字符串：可行吗？

all

有没有什么好的方法可以用纯 HTML 和 CSS 截断文本，以便动态内容适合固定宽度和高度的布局？

我一直在按逻辑
宽度（即盲目猜测的字符数）截断服务器端，但由于“w”比“i”宽，这往往不是最佳的，还需要我重新猜测（并不断调整）每个固定宽度的字符数。理想情况下，截断发生在浏览器中，它知道渲染文本的
物理宽度。

我发现 IE 有一个text-overflow: ellipsis完全符合我要求的属性，但我需要它是跨浏览器的。此属性似乎（有点？）标准，但
Firefox 不支持。

有没有人有一种在固定布局中拟合动态文本的好方法，或者服务器端截断逻辑宽度和我现在要得到的一样好？

阅读 101

2022-06-23

共1个答案

小编典典

更新： text-overflow: ellipsis现在支持Firefox 7（2011 年 9 月 27 日发布）。耶！我的原始答案作为历史记录如下。

Justin Maxwell 有跨浏览器 CSS 解决方案。但它确实有一个缺点，就是不允许在 Firefox 中选择文本。查看他在 Matt Snider
博客上的客座帖子，了解有关其工作原理的完整详细信息。

innerHTML请注意，此技术还可以防止使用Firefox中的属性在 JavaScript 中更新节点的内容。请参阅本文末尾的解决方法。

CSS

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

ellipsis.xml 文件内容

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

更新节点内容

要以适用于 Firefox 的方式更新节点的内容，请使用以下命令：

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

请参阅Matt Snider 的帖子以了解其工作原理。

2022-06-23