用 CSS 截断长字符串:可行吗? [英] Truncating long strings with CSS: feasible yet?

问题描述

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

Is there any good way of truncating text with plain HTML and CSS, so that dynamic content can fit in a fixed-width-and-height layout?

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

I've been truncating server-side by logical width (i.e. a blindly-guessed number of characters), but since a 'w' is wider than an 'i' this tends to be suboptimal, and also requires me to re-guess (and keep tweaking) the number of characters for every fixed width. Ideally the truncation would happen in the browser, which knows the physical width of the rendered text.

我发现 IE 有一个 text-overflow: ellipsis 属性，它完全符合我的要求，但我需要它是跨浏览器的.此属性似乎是(有点?)标准，但 Firefox 不支持.我发现 各种 解决方法基于overflow:hidden，但它们要么不显示省略号(我希望用户知道内容被截断了)，要么一直显示(即使内容没有被截断).

I've found that IE has a text-overflow: ellipsis property that does exactly what I want, but I need this to be cross-browser. This property seems to be (somewhat?) standard but isn't supported by Firefox. I've found various workarounds based on overflow: hidden, but they either don't display an ellipsis (I want the user to know the content was truncated), or display it all the time (even if the content wasn't truncated).

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

Does anyone have a good way of fitting dynamic text in a fixed layout, or is server-side truncation by logical width as good as I'm going to get for now?

推荐答案

更新: text-overflow: ellipsis 现在支持 Firefox 7(2011 年 9 月 27 日发布).耶！我最初的回答是作为历史记录.

Update: text-overflow: ellipsis is now supported as of Firefox 7 (released September 27th 2011). Yay! My original answer follows as a historical record.

Justin Maxwell 有跨浏览器的 CSS 解决方案.但它确实有一个缺点，即不允许在 Firefox 中选择文本.查看 他在 Matt Snider 的博客上的客座帖子，了解关于这是如何工作的.

Justin Maxwell has cross browser CSS solution. It does come with the downside however of not allowing the text to be selected in Firefox. Check out his guest post on Matt Snider's blog for the full details on how this works.

请注意，此技术还会阻止在 JavaScript 中使用 Firefox 中的 innerHTML 属性更新节点的内容.有关解决方法，请参阅本文末尾.

Note this technique also prevents updating the content of the node in JavaScript using the innerHTML property in Firefox. See the end of this post for a workaround.

CSS

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

ellipsis.xml 文件内容

ellipsis.xml file contents

<?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 的方式更新节点的内容，请使用以下命令:

To update the content of a node in a way that works in Firefox use the following:

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 的帖子以了解其工作原理.

这篇关于用 CSS 截断长字符串:可行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！