用CSS截断长字符串:可行吗？
有什么好的方法可以用普通的HTML和CSS来截断文本，这样动态内容就可以适应固定的宽度和高度的布局了吗？
我一直在根据逻辑宽度(即盲目猜测的字符数)截断服务器端，但由于“w”比“i”宽，这往往是次优的，还要求我重新猜测(并不断调整)每个固定宽度的字符数。理想情况下，截断将发生在浏览器中，浏览器知道呈现文本的物理宽度。
我发现IE有一个text-overflow: ellipsis属性，它可以做我想做的事情，但是我需要它是跨浏览器的。此属性为似乎(有点？)标准，但火狐不支持。我找到了基于五花八门 解决办法的overflow: hidden，但它们要么不显示省略号(我希望用户知道内容被截断)，要么一直显示它(即使内容没有被截断)。
有没有人有一个很好的方式拟合动态文本在一个固定的布局，或服务器端截断的逻辑宽度与我现在要得到的一样好？
回答 6
Stack Overflow用户
发布于 2009-07-09 03:27:03
更新： 现在支持截至火狐7(发布于2011年9月27日)。耶！我最初的回答是有历史记载的。
贾斯汀麦克斯韦有跨浏览器CSS解决方案。然而，它的缺点是不允许在Firefox中选择文本。有关此操作的详细信息，请查看他在马特·斯奈德的博客上发表的客座帖子。
注意，此技术还防止使用火狐中的JavaScript属性更新innerHTML中节点的内容。请参阅这篇文章的结尾，以找到解决办法。
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);
}
};见马特·斯奈德的文章解释了这是怎么回事。
Stack Overflow用户
发布于 2014-04-02 12:32:20
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-文本溢出CSS属性:它是文本溢出CSS属性的同义词，但是从6到11的IE版本已经支持文本溢出CSS属性。
在Windows上成功测试(在Browserstack.com上)，用于web浏览器：
- IE6到IE11
- 歌剧10.6、11.1、15.0、20.0
- 铬14，铬20，铬25
- Safari 4.0，Safari 5.0，Safari 5.1
- Firefox 7.0，Firefox 15
Firefox:正如Simon (另一个答案)指出的，Firefox只支持Firefox 7的文本溢出CSS属性(2011年9月27日发布)。
我在Firefox3.0和Firefox6.0(不支持文本溢出)上双重检查了这个行为。
需要在Mac网络浏览器上进行进一步的测试。
注意:当应用省略号时，您可能需要在鼠标悬停上显示工具提示，这可以通过javascript完成，请参见以下问题：HTML文本溢出省略检测和HTML -只有在激活省略号时才能显示工具提示
资源：
- 兼容性
- 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/
Stack Overflow用户
发布于 2009-04-29 12:45:04
如果您可以使用JavaScript解决方案，可以使用jQuery插件以跨浏览器的方式执行此操作-请参阅http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/
https://stackoverflow.com/questions/802175
复制相似问题
腾讯云开发者
