212

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

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

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

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

4

5 回答 5

189

更新： 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 的帖子以了解其工作原理。

于 2009-07-09T03:27:03.677 回答
46

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 属性的同义词，但 IE 6 到 11 的版本已经支持 text-overflow CSS 属性。

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

  • IE6 到 IE11
  • 歌剧 10.6、歌剧 11.1、歌剧 15.0、歌剧 20.0
  • 铬 14、铬 20、铬 25
  • 野生动物园 4.0、野生动物园 5.0、野生动物园 5.1
  • 火狐 7.0、火狐 15

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

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

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

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

资源：

于 2014-04-02T12:32:20.147 回答
19

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

于 2009-04-29T12:45:04.173 回答
7

好的，Firefox 7text-overflow: ellipsis和text-overflow: "string". 最终版本计划于 2011 年 9 月 27 日发布。

于 2011-07-09T16:10:52.337 回答
6

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

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

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

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

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

于 2010-04-09T23:59:04.793 回答