插入省略号(…)如果内容太宽，则转到HTML标记中

Question

插入省略号(…)如果内容太宽，则转到HTML标记中

我有一个网页的弹性布局，改变它的宽度，如果浏览器窗口是调整大小。

在这个布局中有标题(h2)，它将有一个可变的长度(实际上是我无法控制的博客文章中的标题)。目前-如果它们比窗户宽-它们被分成两条线。

是否有一个优雅的、经过测试的(跨浏览器)解决方案-例如使用jQuery-缩短标题标记的内部HTML并添加“.”如果文本太宽，不适合在当前屏幕/容器宽度的一行？

Answer 1

我在FF3、Safari和IE6+中找到了一个单行和多行文本的解决方案.ellipsis&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;nowrap; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;}.ellipsis.multiline&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;normal;}<div&nbsp;class="ellipsis"&nbsp;style="width:&nbsp;100px;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black;">Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adipisicing&nbsp;elit</div><div&nbsp;class="ellipsis&nbsp;multiline"&nbsp;style="width:&nbsp;100px;&nbsp;height:&nbsp;40px;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black;&nbsp;margin-bottom:&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100px">Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipisicing&nbsp;elit</div><script&nbsp;type="text/javascript"&nbsp;src="/js/jquery.ellipsis.js"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</script><script&nbsp;type="text/javascript">$(".ellipsis").ellipsis();</script>jquery.省略.js(function($)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$.fn.ellipsis&nbsp;=&nbsp;function() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.each(function() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;el&nbsp;=&nbsp;$(this); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(el.css("overflow")&nbsp;==&nbsp;"hidden") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;text&nbsp;=&nbsp;el.html(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;multiline&nbsp;=&nbsp;el.hasClass('multiline'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;t&nbsp;=&nbsp;$(this.cloneNode(true)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.hide() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css('position',&nbsp;'absolute') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css('overflow',&nbsp;'visible') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.width(multiline&nbsp;?&nbsp;el.width()&nbsp;:&nbsp;'auto') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.height(multiline&nbsp;?&nbsp;'auto'&nbsp;:&nbsp;el.height()) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el.after(t); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;height()&nbsp;{&nbsp;return&nbsp;t.height()&nbsp;>&nbsp;el.height();&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;width()&nbsp;{&nbsp;return&nbsp;t.width()&nbsp;>&nbsp;el.width();&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;func&nbsp;=&nbsp;multiline&nbsp;?&nbsp;height&nbsp;:&nbsp;width; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(text.length&nbsp;>&nbsp;0&nbsp;&&&nbsp;func()) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;=&nbsp;text.substr(0,&nbsp;text.length&nbsp;-&nbsp;1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t.html(text&nbsp;+&nbsp;"..."); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el.html(t.html()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t.remove(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;};})(jQuery);