我有一个具有弹性布局的网页,如果调整了浏览器窗口的大小,该网页的宽度就会改变。
在此布局中,标题(h2)的长度是可变的(实际上是我无法控制的博客文章的标题)。当前-如果它们比窗口宽-分为两行。
h2
是否有一种经过测试的(跨浏览器)优雅的解决方案(例如jQuery),可以缩短该标题标签的innerHTML,并在文本太宽而无法在当前屏幕/容器宽度?
我有一个可以在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);