用CSS截断长string：可行吗？

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

我已经截断了服务器端的逻辑宽度（即一个盲目猜测的字符数），但由于'W'比'我'更宽这往往是次优的，也需要我重新猜测（并保持调整）每个固定宽度的字符数。 理想情况下，截断会发生在浏览器中，它知道渲染文本的物理宽度。

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

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

Answer 1

更新： text-overflow: ellipsis从Firefox 7（2011年9月27日发布）开始， 现在支持text-overflow: ellipsis 。 好极了！ 我原来的答案是作为一个历史logging。

Justin Maxwell拥有跨浏览器的CSS解决scheme。 但是它的缺点是不允许在Firefox中select文本。 看看Matt Snider的博客上他的客人的post ，了解这个工作的全部细节。

注意这个技巧还可以防止在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); } }; 

看到马特·斯诺德的post来解释这是如何工作的 。

Answer 2

2014年3月：用CSS截断长string：重点关注浏览器支持的新答案

演示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操作系统上成功testing（在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浏览器上进一步testing。

注意：当应用省略号时，您可能希望在鼠标hover时显示工具提示，这可以通过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/
• 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/

Answer 3

如果您可以使用JavaScript解决scheme，那么您可以使用jQuery插件以跨浏览器的方式进行操作 – 请参阅http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-通的jquery /

Answer 4

OK，Firefox 7实现了text-overflow: ellipsis以及text-overflow: "string" 。 计划于2011-09-27最终发布。

Answer 5

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

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

上面的CSS唯一的缺点是它会添加“…”，而不pipe文本是否溢出容器。 不过，如果你有一个情况，你有一堆的元素，并确保内容将溢出，这将是一个更简单的规则集。

我的两分钱 贾斯汀麦克斯韦的原始技术的帽子

Answer 6

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

Answer 7

 .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }