我有一个具有弹性布局的网页，如果调整浏览器窗口的大小，它会更改其宽度。
在这个布局中，有标题（）将具有不同的长度（实际上是我无法控制的博客文章的标题）。目前 - 如果它们比窗口宽 - 它们被分成两行。h2
有没有一个优雅的，经过测试的（跨浏览器）解决方案 - 例如使用jQuery - 缩短了该标题标签的内部HTML并添加了“...”如果文本太宽而无法在当前屏幕/容器宽度下放入一行？
以下用于截断单行文本的 CSS only 解决方案适用于 http://www.caniuse.com 中列出的所有浏览器，但 Firefox 6.0 除外。请注意，JavaScript是完全不必要的，除非你需要支持多行文本或早期版本的Firefox。
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
如果您需要对早期版本的Firefox的支持，请查看我对另一个问题的回答。
我有一个在FF3，Safari和IE6 +中工作的解决方案，具有单行和多行文本
.ellipsis {
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>
jquery.ellipsis.js
(function($) {
$.fn.ellipsis = function()
{
return this.each(function()
{
var el = $(this);
if(el.css("overflow") == "hidden")
{
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(t);
function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };
var func = multiline ? height : width;
while (text.length > 0 && func())
{
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());
t.remove();
}
});
};
})(jQuery);
