有没有什么好的方法可以用纯HTML和CSS来截断文本，从而使动态内容能够适合固定宽度和高度的布局?
我一直在根据逻辑宽度(即盲目猜测的字符数量)截断服务器端，但由于“w”比“I”宽，这往往是次优的，并且还需要我重新猜测(并不断调整)每个固定宽度的字符数量。理想情况下，截断应该发生在浏览器中，因为浏览器知道呈现文本的物理宽度。
我发现IE有一个text-overflow: ellipsis属性，这正是我想要的，但我需要这是跨浏览器的。这个属性似乎是标准的，但Firefox不支持。我发现了基于overflow: hidden的各种变通方法，但它们要么不显示省略号(我想让用户知道内容被截断了)，要么一直显示省略号(即使内容没有被截断)。
有人有一个很好的方法来拟合动态文本在一个固定的布局，或者服务器端截断逻辑宽度就像我现在要得到的一样好吗?
如果您可以使用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的原始技术致敬
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/
到2022年，有一个新的方法来完成这个任务，这是CSS规则线夹，它基本上告诉我们应该保留多少行，其余的都将被修剪。下面是一个例子，在这里您可以拖动角落，并试验div的尺寸。
#resizable { width: 400px; height: 150px; padding: 0 20px; } .wrapper { border: 1px solid #dddddd; background: #ffffff; color: #333333; position: relative; } .slider-text-wrapper p, .slider-text-wrapper .h1 { width: 100%; word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 4; -moz-line-clamp: 4; -ms-line-clamp: 4; line-clamp: 4; overflow: hidden; } .slider-text-wrapper .h1 { -webkit-line-clamp: 2; -moz-line-clamp: 2; -ms-line-clamp: 2; line-clamp: 2; font-size: 20px; margin: 10px 0; } <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script> $( function() { $( "#resizable" ).resizable(); } ); </script> <div id="resizable" class="ui-widget-content wrapper"> <div class="slider-text-wrapper"> <p class="h1">Example headline with surplus of words without any meaning, for just mere demonstration of html and css</p> <p class="slider-text-intro">Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel.</p> </p> </div>
