Question

是否有任何使用纯HTML和CSS截断文本的好方法，以便动态内容可以适应固定宽度和高度的布局？

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

我发现IE有一个text-overflow: ellipsis属性，它完全符合我的要求，但我需要这是跨浏览器。此属性seems to be (somewhat?) standard但Firefox不支持。我发现various workarounds基于overflow: hidden，但它们要么不显示省略号（我希望用户知道内容被截断），要么一直显示（即使内容没有被截断）。

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

Answer 1

自Firefox 7（2011年9月27日发布）起，

更新 text-overflow: ellipsis is now supported。好极了！我的原始答案是历史记录。

Justin Maxwell拥有跨浏览器的CSS解决方案。但确实存在缺点，即不允许在Firefox中选择文本。查看his guest post on Matt Snider's blog以获取有关其工作原理的完整详细信息。

请注意，此技术还会阻止使用Firefox中的innerHTML属性更新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's post for an explanation of how this works。

Answer 2

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属性不是必需的：它是文本溢出CSS属性的同义词，但是从6到11的IE版本已经支持文本溢出CSS属性。

在Windows操作系统上成功测试（在Browserstack.com上），用于Web浏览器：

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开始的文本溢出CSS属性（2011年9月27日发布）。

我在Firefox 3.0＆amp ;;上仔细检查了这种行为。 Firefox 6.0（不支持文本溢出）。

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

注意：当应用省略号时，您可能希望在鼠标悬停时显示工具提示，这可以通过javascript完成，请参阅以下问题：HTML text-overflow ellipsis detection和HTML - how can I show tooltip ONLY when ellipsis is activated

资源：

Answer 3

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

Answer 4

好的，Firefox 7实现了text-overflow: ellipsis以及text-overflow: "string"。最终版本计划于2011-09-27。

Answer 5

该问题的另一个解决方案可能是以下一组CSS规则：

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

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

上述CSS的唯一缺点是它会添加“...”而不管文本是否溢出容器。尽管如此，如果您遇到一堆元素，并且确定内容会溢出，那么这个规则就会更简单。

我的两分钱。贾斯汀·马克斯韦尔（Justin Maxwell）致力于原创技术

Answer 6

作为参考，这里是“bug”跟踪text-overflow: ellipsis support in Firefox的链接。听起来像Firefox是唯一不支持原生CSS解决方案的主要浏览器。

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

6 个答案: