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

一尘不染

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

css

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

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

我发现IE的text-overflow:ellipsis属性完全可以满足我的要求，但是我需要它能够跨浏览器。该属性似乎是（某种程度上）标准的，但是Firefox不支持。我发现了各种基于的变通办法hidden`，但是它们要么不显示省略号（我希望用户知道内容被截断了），要么一直显示（即使内容未被截断了）。

有没有人能以固定的布局适合动态文本，或者通过逻辑宽度将服务器端截断功能与我现在想要的一样好？

阅读 247

2020-05-16

共1个答案

一尘不染

更新： Firefox 7text-overflow:ellipsis现在已受支持。好极了！我的原始答案是历史记录。

请注意，此技术还可以防止使用innerHTMLFirefox中的属性更新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的帖子以获取有关其工作原理的解释

2020-05-16