截断的长串CSS:可行吗？

StackOverflow https://stackoverflow.com/questions/802175

题

是否有任何好的方法截取的文字与普通HTML和CSS，以便使动态的内容可能适合在一个固定的宽度和高度的布局？

我已经截断服务器的端通过 逻辑 宽(即一个盲目-猜到了数字)，但由于'w'宽于一个'我'这往往是次优的，并且还要求我重新想(和保留调整)的数字为每一个固定的宽度。理想情况下截断将发生在浏览器，这知道的 物理 宽度呈现的文本。

我已经发现，即有一个 text-overflow: ellipsis 财产，不正是我想要的，但我需要这是跨浏览器。这个酒店 似乎是(有点?) 标准 但不支持通过Firefox。我已经找到了 各个 解决方法 基于上 overflow: hidden, 但他们不显示有省略号(我要用户得知的内容是截的)，或者显示它的所有时间(即使内容不是截).

任何人都不会有一个很好的方式，配合的动态文本中的一个固定的布局，或者是服务器侧截断通过逻辑的宽度为好，因为我要得到现在?

有帮助吗？

解决方案

更新： text-overflow：省略号 。好极了！我的原始答案是历史记录。

Justin Maxwell拥有跨浏览器的CSS解决方案。但确实存在缺点，即不允许在Firefox中选择文本。查看他在Matt Snider博客上的客座帖子，了解有关这是如何运作的。

请注意，此技术还会阻止使用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的帖子，了解其工作原理。

其他提示

2014年三月：截断的长串CSS:一个新的答案，重点支持的浏览器

演示 http://jsbin.com/leyukama/1/ (I使用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-文本溢出的属性是不必要的：它是一个代名词的文本溢出CSS财产，但版本的即从6至11已经支持的文本溢出CSS财产。

成功地进行测试(上Browserstack.com)对Windows操作系统，网络浏览器：

  • IE6到internet explorer11
  • 歌剧10.6，歌剧11.1，歌剧15.0，歌剧20.0
  • 铬14、铬20、铬25
  • Safari4.0，Safari5.0，Safari5.1
  • Firefox7.0，火狐15

Firefox：如指出的，西蒙Lieschke(在另一个答复)，火狐只能支持该文本溢出CSS财产从火狐7起(发布了九月27日2011年)。

我双重检查这种行为在火狐3.0&Firefox6.0(文本溢出是不支持)。

一些进一步的测试Mac OS网络浏览器将是必要的。

注：你可能希望显示一个提示在老鼠悬停时的省略号是适用的，这可以通过javascript,看到这个问题： HTML文本溢出的省略号的检测 和 HTML-我怎么可以显示提示只有当省略号是激活

资源：

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

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

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

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

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

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top