有没有什么好的方法可以用纯HTML和CSS来截断文本，从而使动态内容能够适合固定宽度和高度的布局?
我一直在根据逻辑宽度(即盲目猜测的字符数量)截断服务器端，但由于“w”比“I”宽，这往往是次优的，并且还需要我重新猜测(并不断调整)每个固定宽度的字符数量。理想情况下，截断应该发生在浏览器中，因为浏览器知道呈现文本的物理宽度。
我发现IE有一个text-overflow: ellipsis属性，这正是我想要的，但我需要这是跨浏览器的。这个属性似乎是标准的，但Firefox不支持。我发现了基于overflow: hidden的各种变通方法，但它们要么不显示省略号(我想让用户知道内容被截断了)，要么一直显示省略号(即使内容没有被截断)。
有人有一个很好的方法来拟合动态文本在一个固定的布局，或者服务器端截断逻辑宽度就像我现在要得到的一样好吗?
当前回答
这个问题的另一个解决方案可能是下面的一组CSS规则:
.ellipsis{
white-space:nowrap;
overflow:hidden;
}
.ellipsis:after{
content:'...';
}
上面CSS的唯一缺点是，无论文本是否溢出容器，它都会添加“…”。不过，如果您有一堆元素，并且确定内容会溢出，那么这将是一组更简单的规则。
我的意见。向Justin Maxwell的原始技术致敬
其他回答
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属性不是必须的:它是text-overflow CSS属性的同义词，但是IE从6到11的版本已经支持text-overflow 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(2011年9月27日发布)开始只支持文本溢出CSS属性。
我在Firefox 3.0和Firefox 6.0上反复检查了这个行为(不支持文本溢出)。
在Mac OS网络浏览器上还需要进一步测试。
注意:当一个省略号被应用时，你可能想要在鼠标悬停上显示一个工具提示，这可以通过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/
好的，Firefox 7实现了text-overflow:省略号和text-overflow: "string"。最终版本计划于2011-09-27发布。
如果您可以使用JavaScript解决方案，有一个jQuery插件可以跨浏览器实现这个功能——请参阅http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/
更新:Firefox 7(2011年9月27日发布)现在支持text-overflow:省略号。耶!我最初的回答是有历史记载的。
Justin Maxwell有跨浏览器的CSS解决方案。但是它也有缺点，就是不能在Firefox中选择文本。查看他在马特·斯奈德博客上的客座文章，了解这是如何工作的全部细节。
注意，这种技术还阻止使用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');
}
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的帖子，了解这是如何工作的。
这个问题的另一个解决方案可能是下面的一组CSS规则:
.ellipsis{
white-space:nowrap;
overflow:hidden;
}
.ellipsis:after{
content:'...';
}
上面CSS的唯一缺点是，无论文本是否溢出容器，它都会添加“…”。不过，如果您有一堆元素，并且确定内容会溢出，那么这将是一组更简单的规则。
我的意见。向Justin Maxwell的原始技术致敬
