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

Truncating long strings with CSS: feasible yet?

提问by Sam Stokes

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?

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

I've been truncating server-side by logicalwidth (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 physicalwidth of the rendered text.

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

I've found that IE has a text-overflow: ellipsisproperty that does exactly what I want, but I need this to be cross-browser. This property seems to be (somewhat?) standardbut isn't supported by Firefox. I've found variousworkaroundsbased 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).

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

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?

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

采纳答案by Simon Lieschke

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

更新：text-overflow: ellipsis现在支持Firefox 7（2011 年 9 月 27 日发布）。好极了！我最初的回答是作为历史记录。

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 blogfor the full details on how this works.

Justin Maxwell 有跨浏览器 CSS 解决方案。但它确实有一个缺点，即不允许在 Firefox 中选择文本。查看他在 Matt Snider 博客上的客座帖子，了解有关其工作原理的完整详细信息。

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

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

CSS

CSS

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

ellipsis.xmlfile contents

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>

Updating node content

更新节点内容

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

要以适用于 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);
    }
};

See Matt Snider's post for an explanation of how this works.

请参阅Matt Snider 的帖子以了解其工作原理。

回答by Adrien Be

2014 March: Truncating long strings with CSS: a new answer with focus on browser support

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

Demo on http://jsbin.com/leyukama/1/(I use jsbin because it supports old version of IE).

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>

The -ms-text-overflow CSS property is not necessary: it is a synonym of the text-overflow CSS property, but versions of IE from 6 to 11 already support the text-overflow CSS property.

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

Successfully tested (on Browserstack.com) on Windows OS, for web browsers:

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

• IE6 to 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

• IE6 到 IE11
• 歌剧 10.6、歌剧 11.1、歌剧 15.0、歌剧 20.0
• 铬 14、铬 20、铬 25
• Safari 4.0、Safari 5.0、Safari 5.1
• 火狐 7.0、火狐 15

Firefox: as pointed out by Simon Lieschke (in another answer), Firefox only support the text-overflow CSS property from Firefox 7 onwards (released September 27th 2011).

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

I double checked this behavior on Firefox 3.0 & Firefox 6.0 (text-overflow is not supported).

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

Some further testing on a Mac OS web browsers would be needed.

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

Note: you may want to show a tooltip on mouse hover when an ellipsis is applied, this can be done via javascript, see this questions: HTML text-overflow ellipsis detectionand HTML - how can I show tooltip ONLY when ellipsis is activated

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

Resources:

资源：

• https://developer.mozilla.org/en-US/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/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

• https://developer.mozilla.org/en-US/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/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

回答by RichieHindle

If you're OK with a JavaScript solution, there's a jQuery plug-in to do this in a cross-browser fashion - see http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/

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

回答by j.j.

OK, Firefox 7 implemented text-overflow: ellipsisas well as text-overflow: "string". Final release is planned for 2011-09-27.

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

回答by Rajat

Another solution to the problem could be the following set of CSS rules:

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

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

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

The only drawback with the above CSS is that it would add the "..." irrespective of whether the text-overflows the container or not. Still, if you have a case where you have a bunch of elements and are sure that content will overflow, this one would be a simpler set of rules.

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

My two cents. Hats off to the original technique by Justin Maxwell

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

回答by Sam Stokes

For reference, here's a link to the "bug" tracking text-overflow: ellipsis support in Firefox. Sounds like Firefox is the only major browser left that doesn't support a native CSS solution.

作为参考，这里是“错误”跟踪文本溢出的链接：Firefox 中的省略号支持。听起来 Firefox 是唯一不支持原生 CSS 解决方案的主要浏览器。