有没有什么好的方法可以用纯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实现了text-overflow:省略号和text-overflow: "string"。最终版本计划于2011-09-27发布。
这个问题的另一个解决方案可能是下面的一组CSS规则:
.ellipsis{
white-space:nowrap;
overflow:hidden;
}
.ellipsis:after{
content:'...';
}
上面CSS的唯一缺点是，无论文本是否溢出容器，它都会添加“…”。不过，如果您有一堆元素，并且确定内容会溢出，那么这将是一组更简单的规则。
我的意见。向Justin Maxwell的原始技术致敬
到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>
更新: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的帖子，了解这是如何工作的。
如果您可以使用JavaScript解决方案，有一个jQuery插件可以跨浏览器实现这个功能——请参阅http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/
