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

Question

插入省略号(…)如果内容太宽，则转到HTML标记中我有一个网页的弹性布局，改变它的宽度，如果浏览器窗口是调整大小。在这个布局中有标题(h2)，它将有一个可变的长度(实际上是我无法控制的博客文章中的标题)。目前-如果它们比窗户宽-它们被分成两条线。是否有一个优雅的、经过测试的(跨浏览器)解决方案-例如使用jQuery-缩短标题标记的内部HTML并添加“.”如果文本太宽，不适合在当前屏幕/容器宽度的一行？

Answer 1

我在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.省略.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);