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

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

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

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

有没有人能以固定的布局来适合动态文本的好方法，还是服务器端的逻辑宽度截断是否和我现在想要的一样好？

更新： Firefox 7（2011年9月27日发布）text-overflow: ellipsis现在已受支持。好极了！我的原始答案是历史记录。

Justin Maxwell具有跨浏览器CSS解决方案。但是它的缺点是不允许在Firefox中选择文本。在Matt Snider的博客上查看其来宾帖子，以获取有关其工作原理的完整详细信息。

请注意，此技术还可以防止使用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的帖子。

2014年3月：使用CSS截断长字符串：针对浏览器支持的新答案

在http://jsbin.com/leyukama/1/上进行演示（我使用jsbin，因为它支持IE的旧版本）。

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

-ms-text-overflow CSS属性不是必需的：它是text-overflow CSS属性的同义词，但是从6到11的IE版本已经支持text-overflow CSS属性。

在Windows OS上针对Web浏览器成功测试（在Browserstack.com上）：

• IE6至IE11
• Opera 10.6，Opera 11.1，Opera 15.0，Opera 20.0
• Chrome 14，Chrome 20，Chrome 25
• Safari 4.0，Safari 5.0，Safari 5.1
• Firefox 7.0，Firefox 15

Firefox：Simon Lieschke（在另一个答案中指出）指出，Firefox仅支持从Firefox 7开始（2011年9月27日发布）的文本溢出CSS属性。

我在Firefox 3.0和Firefox 6.0上再次检查了此行为（不支持文本溢出）。

需要在Mac OS Web浏览器上进行一些进一步的测试。

注意：应用省略号时，您可能希望在鼠标悬停时显示工具提示，这可以通过javascript完成，请参见以下问题：HTML文本溢出省略号检测和HTML-仅在激活省略号时如何显示工具提示

资源：

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/zh-CN/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

如果您可以使用JavaScript解决方案，可以使用jQuery插件以跨浏览器的方式进行操作-请参见http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-via-jquery /

确定，已实施Firefox 7 text-overflow: ellipsis以及text-overflow: "string"。最终版本计划于2011-09-27发布。

解决该问题的另一种方法是使用以下CSS规则集：

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

上面的CSS的唯一缺点是，无论文本是否溢出容器，它都会添加“ ...”。不过，如果您遇到一堆元素并且确定内容会溢出的情况，那么这将是一组更简单的规则。

我的两分钱。向Justin Maxwell的原始技术致敬