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

Question

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

我已经截断由服务器端的逻辑宽度(即一个盲目猜测的字符数),但由于一个"W"是比更宽的"i"这倾向于是次优的,并且还需要我重新猜测(并保持调整)每个固定宽度的字符数.理想情况下,截断将在浏览器中发生,浏览器知道渲染文本的物理宽度.

我发现IE有一个text-overflow: ellipsis属性正是我想要的,但我需要这个是跨浏览器.这个属性似乎(有些？)标准但Firefox不支持.我发现各种 解决方法基础上overflow: hidden,但他们要么不显示省略号(我希望用户知道的内容被截断),或显示这一切的时候(即使内容没有截断).

有没有人有一个很好的方法来适应固定布局中的动态文本,或者是服务器端截断的逻辑宽度和我现在要获得的一样好？

Answer 1

更新: text-overflow: ellipsis现在支持 Firefox 7(2011年9月27日发布).好极了!我的原始答案是作为历史记录.

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的帖子,了解其工作原理.

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和Firefox 6.0上仔细检查了这种行为(不支持文本溢出).

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

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

资源:

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

Answer 3

如果你确定了JavaScript解决方案,有一个jQuery插件来做到这一点的一个跨浏览器的方式-看http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-通的jquery /

Answer 4

OK,火狐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)对原始技术大加赞赏