1. ホーム
  2. javascript

[解決済み] コンテンツが広すぎる場合、HTMLタグに省略記号(...)を挿入する

2022-04-28 10:58:41

質問

ブラウザのウィンドウサイズを変更すると幅が変わるエラスティックレイアウトのウェブページがあります。

このレイアウトでは、見出し( h2 ) は、可変長です (実際には、私がコントロールできないブログ記事の見出しです)。現在、ウィンドウより幅が広い場合は、2行に分割されています。

例えばjQueryを使用して、見出しタグのinnerHTMLを短くし、テキストが現在のスクリーン/コンテナ幅で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.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);