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

Posted 2023-05-07

【中文标题】用 CSS 截断长字符串：可行吗？

【英文标题】：Truncating long strings with CSS: feasible yet?

【发布时间】：2010-10-22 13:51:40

【问题描述】：

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

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

我发现 IE 有一个 text-overflow: ellipsis 属性，这正是我想要的，但我需要它是跨浏览器的。此属性 seems to be (somewhat?) standard 但不受 Firefox 支持。我根据overflow: hidden 找到了various workarounds，但它们要么不显示省略号（我希望用户知道内容被截断），要么一直显示（即使内容是'不被截断）。

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

【问题讨论】：

2014：查看最新答案***.com/questions/802175/…

相关：Applying Ellipsis to Multiline Text

Insert ellipsis (...) into HTML tag if content too wide的可能重复

【参考方案1】：

更新： text-overflow: ellipsis is now supported 自 Firefox 7（2011 年 9 月 27 日发布）起。耶！我的原始答案作为历史记录如下。

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。

【讨论】：

太棒了，谢谢指出！不可选择的文本和对截断 div 中可以包含哪些内容的限制令人遗憾，但通常这看起来是一个不错的解决方案。

唯一让我感到沮丧的是空格被渲染为  ，所以缩进实际上并不可行...... =/

我也遇到了同样的问题。我不敢相信 Firefox 还不支持这种形式。

这种方法是否适用于 Webkit 和 IE8 上 SELECT 控件的 OPTION 元素的任何人。 Webkit 似乎没有为我做任何事情，而 IE8 只是在没有省略号的情况下对其进行剪辑。

Microsoft 的text-overflow 文档并未表明支持option 元素（请参阅msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx 的适用于部分）。

【参考方案2】：

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

http://jsbin.com/leyukama/1/上的Demo（我用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 Opera 10.6、Opera 11.1、Opera 15.0、Opera 20.0 铬 14、铬 20、铬 25 Safari 4.0、Safari 5.0、Safari 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 和 HTML - how can I show tooltip ONLY when ellipsis is activated

资源：

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ https://***.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/

【讨论】：

@chiragpatel 自己尝试编辑这个现场演示jsbin.com/leyukama/1

对于任何对 FF7 感兴趣的人

【参考方案3】：

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

【讨论】：

这绝对有用，谢谢！似乎除了 Firefox 之外的所有浏览器都支持 CSS 属性，所以有了这个插件，它唯一不适合的人是禁用了 Javascript 的 Firefox 用户——无论如何，这是一个优雅的退化。知道性能影响是什么样的吗？

不，对不起...我没有在现实生活中使用过代码，只是玩了演示。拿这个演示并将它剪切并粘贴到同一个页面上一百次是很容易的。

JavaScript truncate() （无论是 jQuery 还是 Prototype 的点字符串或其他）只是一个中途解决方案，因为它们不考虑字符宽度。因此，如果您因为预定义的有限空间而想要截断文本，那么这些函数只有在使用等宽字体时才能可靠地工作。任何严肃的解决方案都必须对字形进行操作，而不是对字符数进行操作。

@Matthias：也许代码在您测试后已经更新，但我刚刚查看了演示，它与可变宽度字体完美配合。

【参考方案4】：

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

【参考方案5】：

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

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


.ellipsis:after
  content:'...';

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

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

【讨论】：

伪代码的问题是，如果文本溢出，“...”仍然会被截断或隐藏。我希望如果文本溢出，它会确保显示“...”。显然，情况并非如此:(

@Antony 只需定位伪元素：position: absolute; right: 0;（不要忘记将position: relative 放在真实元素上以使其工作）。它会与文本重叠，因此您可能还想添加背景颜色。