コンテンツが広すぎる場合は、省略記号(…)をHTMLタグに挿入します


148

ブラウザーウィンドウのサイズを変更すると幅が変わる弾性レイアウトのWebページがあります。

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

その見出しタグのinnerHTMLを短縮し、テキストが現在の画面の1行に収まらない場合に「...」を追加する、エレガントでテスト済みの(クロスブラウザー)ソリューション(jQueryなど)はありますか/コンテナの幅?


1
2014更新された回答:stackoverflow.com/a/22811590/759452
Adrien Be

このスレッドに基づいて、CSSプロパティの空白とワードラップを使用してテキストをフォーマットするプラグインを作成しました。github.com/nothrem/jQuerySmartEllipsis
Radek Pech

回答:


119

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);

22
いいですね、私は複数行でオーバーフローを処理する方法を探していました。1つの改善点:3つのピリオドを追加する代わりに、省略記号「…」を追加します。
Simon Lieschke、2009

4
これは非常にうまく機能します。これはjQueryサイトで公開する必要があります。
エドガー

1
IEではリンクのみのdivに省略機能が適用されている場合でも、省略の後、リンクは表示されなくなります。これへのポインタは?
Chantz

6
この動作を確認したい場合は、こちらで確認できます(プラグインコードの厄介な
Dan Esparza

22
パフォーマンスを向上させるには、「while」ループで一度に1文字を削除するのではなく、バイナリ検索を実行します。テキストの100%が収まらない場合は、テキストの50%を試してください。次に、50%が収まる場合はテキストの75%、50%が収まらない場合は25%など
StanleyH

182

1行のテキストを切り捨てる次のCSSのみのソリューションは、Firefox 6.0を除いて、執筆時点でhttp://www.caniuse.comにリストされているすべてのブラウザで機能します。複数行のテキストの折り返しや以前のバージョンのFirefoxをサポートする必要がない限り、JavaScriptはまったく不要です。

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

Firefoxの以前のバージョンのサポートが必要な場合は、この他の質問に対する私の回答を確認しください。


2
これは、jQueryアプローチよりも桁違いに高速です。IE7 +およびChromeで正常に動作します。
JDBはモニカの

3
これは古くからあるブラウザでもうまく機能します。Googleでは、2004年までGoogleで問題なく使用していましたが、実際には一部のブラウザで適切にサポートまたは低下させる必要がありました。
ElBel

2
ブラウザでサンプリングしたい人のためのJSフィドル-jsfiddle.net/r39Ad
Deepak Bala

@DilipRajkumarあなたは例えばより詳細な情報を提供する必要がありますA JSFiddleの例では、IE 8で動作していないことを証明する
サイモンLieschke

1
@SharpCoderあなたはしません。テキストが途切れる場所は、テキストが含まれる要素の幅によって決まります。つまり、テキストが要素の幅をオーバーフローすると切り捨てられます。
Simon Lieschke 2014

40

このコードは、他のいくつかの投稿を使用して作成しましたが、次の機能強化が行われています。

  1. バイナリ検索を使用して、適切なテキスト長を見つけます。
  2. アイテムが最初に表示されたときに省略記号コードを再実行するワンショット表示イベントを設定することにより、省略記号要素が最初に非表示になるケースを処理します。これは、一部のアイテムが最初に表示されないマスター/詳細ビューまたはツリービューに便利です。
  3. 必要に応じて、ホバーオーバー効果のために、元のテキストと共にタイトル属性を追加します。
  4. display: blockスタイルに追加されたため、スパンは機能します
  5. 3つのピリオドの代わりに省略記号を使用します。
  6. .ellipsisクラスを持つすべてのスクリプトを自動実行します

CSS:

.ellipsis {
        white-space: nowrap;
        overflow: hidden;
        display: block;
}

.ellipsis.multiline {
        white-space: normal;
}

jquery.ellipsis.js

(function ($) {

    // this is a binary search that operates via a function
    // func should return < 0 if it should search smaller values
    // func should return > 0 if it should search larger values
    // func should return = 0 if the exact value is found
    // Note: this function handles multiple matches and will return the last match
    // this returns -1 if no match is found
    function binarySearch(length, func) {
        var low = 0;
        var high = length - 1;
        var best = -1;
        var mid;

        while (low <= high) {
            mid = ~ ~((low + high) / 2); //~~ is a fast way to convert something to an int
            var result = func(mid);
            if (result < 0) {
                high = mid - 1;
            } else if (result > 0) {
                low = mid + 1;
            } else {
                best = mid;
                low = mid + 1;
            }
        }

        return best;
    }

    // setup handlers for events for show/hide
    $.each(["show", "toggleClass", "addClass", "removeClass"], function () {

        //get the old function, e.g. $.fn.show   or $.fn.hide
        var oldFn = $.fn[this];
        $.fn[this] = function () {

            // get the items that are currently hidden
            var hidden = this.find(":hidden").add(this.filter(":hidden"));

            // run the original function
            var result = oldFn.apply(this, arguments);

            // for all of the hidden elements that are now visible
            hidden.filter(":visible").each(function () {
                // trigger the show msg
                $(this).triggerHandler("show");
            });

            return result;
        };
    });

    // create the ellipsis function
    // when addTooltip = true, add a title attribute with the original text
    $.fn.ellipsis = function (addTooltip) {

        return this.each(function () {
            var el = $(this);

            if (el.is(":visible")) {

                if (el.css("overflow") === "hidden") {
                    var content = el.html();
                    var multiline = el.hasClass('multiline');
                    var tempElement = $(this.cloneNode(true))
                        .hide()
                        .css('position', 'absolute')
                        .css('overflow', 'visible')
                        .width(multiline ? el.width() : 'auto')
                        .height(multiline ? 'auto' : el.height())
                    ;

                    el.after(tempElement);

                    var tooTallFunc = function () {
                        return tempElement.height() > el.height();
                    };

                    var tooWideFunc = function () {
                        return tempElement.width() > el.width();
                    };

                    var tooLongFunc = multiline ? tooTallFunc : tooWideFunc;

                    // if the element is too long...
                    if (tooLongFunc()) {

                        var tooltipText = null;
                        // if a tooltip was requested...
                        if (addTooltip) {
                            // trim leading/trailing whitespace
                            // and consolidate internal whitespace to a single space
                            tooltipText = $.trim(el.text()).replace(/\s\s+/g, ' ');
                        }

                        var originalContent = content;

                        var createContentFunc = function (i) {
                            content = originalContent.substr(0, i);
                            tempElement.html(content + "…");
                        };

                        var searchFunc = function (i) {
                            createContentFunc(i);
                            if (tooLongFunc()) {
                                return -1;
                            }
                            return 0;
                        };

                        var len = binarySearch(content.length - 1, searchFunc);

                        createContentFunc(len);

                        el.html(tempElement.html());

                        // add the tooltip if appropriate
                        if (tooltipText !== null) {
                            el.attr('title', tooltipText);
                        }
                    }

                    tempElement.remove();
                }
            }
            else {
                // if this isn't visible, then hook up the show event
                el.one('show', function () {
                    $(this).ellipsis(addTooltip);
                });
            }
        });
    };

    // ellipsification for items with an ellipsis
    $(document).ready(function () {
        $('.ellipsis').ellipsis(true);
    });

} (jQuery));

2
綺麗な。二分探索の私の提案を実装するためのブラボー。
StanleyH 2012

2
簡単なメモ... tempElement変数に.css( 'max-width'、 'none')を追加する価値があります...このように、CSSで最大幅宣言を使用して、プラグインをはるかに柔軟にすることができます(少なくとも私が持っているほとんどのユースケースでは)。とにかくいい仕事。:)
gordyr

3
これは、上記の受け入れられた回答よりもはるかに速い実装です。複数の.ellipsis要素があり、それらで動的に何かをしている場合、これははるかに優れたパフォーマンスを発揮します。
mjvotaw

例を挙げていただけますか?私の質問はここにある:stackoverflow.com/questions/26344520/...
SearchForKnowledge

バイナリ検索は望ましいですが、非常に小さなデータセットではなく、この場合、indexOf()などの直線的な検索と比較してパフォーマンスが低下します...明らかに
user1360809

20

私の回答は1行のテキストのみをサポートしています。マルチラインフォークについては、gfullamのコメントをご覧ください。非常に有望に見えます。

最初の回答のコードを何度か書き直しましたが、これが最速だと思います。

最初に「推定」テキストの長さを検出し、幅が正しくなるまで文字を追加または削除します。

使用するロジックを以下に示します。

ここに画像の説明を入力してください

「推定された」テキスト長が見つかった後、希望の幅に達するまで文字が追加または削除されます。

きっと調整が必要だと思いますが、コードは次のとおりです。

(function ($) {
    $.fn.ellipsis = function () {
        return this.each(function () {
            var el = $(this);

            if (el.css("overflow") == "hidden") {
                var text = el.html().trim();
                var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width('auto')
                                        .height(el.height())
                                        ;
                el.after(t);

                function width() { return t.width() > el.width(); };

                if (width()) {

                    var myElipse = "....";

                    t.html(text);

                    var suggestedCharLength = (text.length * el.width() / t.width()) - myElipse.length;

                    t.html(text.substr(0, suggestedCharLength) + myElipse);

                    var x = 1;
                    if (width()) {
                        while (width()) {
                            t.html(text.substr(0, suggestedCharLength - x) + myElipse);
                            x++;
                        }
                    }
                    else {
                        while (!width()) {
                            t.html(text.substr(0, suggestedCharLength + x) + myElipse);
                            x++;
                        }
                        x--;
                        t.html(text.substr(0, suggestedCharLength + x) + myElipse);
                    }

                    el.html(t.html());
                    t.remove();
                }
            }
        });
    };
})(jQuery);

3
あなたのソリューションは最高ではないかもしれませんが、それは非常によく説明されています。そして、私はこのタイプの近似論理が好きです。+1 :)
2013年

2
textareaと複数行(垂直)の省略記号のサポートを追加するためにこれを分岐しました:jsfiddle.net/gfullam/j29z7381(私は近似ロジックBTWが好きです)
gfullam

19

万一に備えて、2013年にここで終わります-ここに私が見つけた純粋なcssアプローチがあります:http : //css-tricks.com/snippets/css/truncate-string-with-ellipsis/

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

それはうまくいきます。


1
FWIW、要素でtext-overflowは機能しませんtextarea(2015年現在)。サポートが必要な場合は、受け入れられた回答をtextarea変更するか、このフォークを使用することで実現できます。
gfullam、2015

18

テキストの省略のすべての種類を処理するための本当にクールなjQueryプラグインは、ThreeDots @ http://tpgblog.com/threedotsと呼ばれるものです。

CSSのアプローチよりもはるかに柔軟性が高く、はるかに高度でカスタマイズ可能な動作と相互作用をサポートします。

楽しい。


8

より柔軟なjQueryプラグインにより、省略記号の後に要素を保持し(たとえば、「続きを読む」ボタン)、onWindowResizeを更新できます。また、マークアップ付きのテキストを回避します。

http://dotdotdot.frebsite.nl


私はこのプラグインをテストしたばかりですが、機能させることができませんでした。Trunk8は私にとってより良い選択でした。
Guilherme Garnier

8

trunk8 jQueryプラグインは複数行をサポートし、省略記号のサフィックスとして、省略記号だけでなく任意のhtmlを使用できます:https : //github.com/rviscomi/trunk8

デモはこちら:http : //jrvis.com/trunk8/


ええ、しかしこれは今は古代です。サポートされていないようですか?
user2513846 2016年

1
それは積極的にサポートされているように見えます-執筆時点(2016年3月)では、問題とPRはプロジェクト作成者を含む最近の活動を示しています。
Eliot Sykes

5

CSSでこれ行うには、IEが非標準とFFサポートでこれを拡張しているという事実を利用して、かなり簡単な方法が実際にあります:after

また、必要に応じてJSでこれを行うことができます。ターゲットのscrollWidthを検査し、それをその親の幅と比較しますが、これは堅牢性に欠けます。

編集:これはどうやら私が思っていたよりも開発が進んでいるようです。CSS3のサポートは間もなく存在する可能性があり、一部の不完全な拡張機能を試すことができます。

最後の1つは良い読み物です。


実際、私はJSソリューションを好みます。テキストが使用可能なスペースよりも広い場合にのみ「...」が追加されるためです。
BlaM 2009

3

私は最近、クライアントに対して同様のことをしました。これが私が彼らのためにしたことのバージョンです(例は、Win Vistaのすべての最新ブラウザバージョンでテストされています)。全面的に完璧というわけではありませんが、かなり簡単に調整できます。

デモ:http : //enobrev.info/ellipsis/

コード:

<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script>            
            google.load("jquery", "1.2.6");
            google.setOnLoadCallback(function() {
                $('.longtext').each(function() {
                    if ($(this).attr('scrollWidth') > $(this).width()) {
                        $more = $('<b class="more">&hellip;</b>');

                        // add it to the dom first, so it will have dimensions
                        $(this).append($more);

                        // now set the position
                        $more.css({
                            top: '-' + $(this).height() + 'px',
                            left: ($(this).attr('offsetWidth') - $more.attr('offsetWidth')) + 'px'
                        });
                    }
                });
            });
        </script>

        <style>
            .longtext {
                height: 20px;
                width: 300px;
                overflow: hidden;
                white-space: nowrap;
                border: 1px solid #f00;
            }

            .more {
                z-index: 10;
                position: relative;
                display: block;
                background-color: #fff;
                width: 18px;
                padding: 0 2px;
            }
        </style>
    </head>
    <body>
        <p class="longtext">This is some really long text.  This is some really long text.  This is some really long text.  This is some really long text.</p>
    </body>
</html>

3

まあ、1つの単純な解決策は、 "..."を追加しませんが、<h2>が2行に分割されるのを防ぎますが、次のcssのビットを追加します。

h2 {
    height:some_height_in_px; /* this is the height of the line */
    overflow:hidden; /* so that the second (or third, fourth, etc.)
                        line is not visible */
}

私はそれをもう少し考えて、私はこの解決策を思いつきました、あなたはあなたのh2タグのテキストコンテンツを別のタグ(例えばスパン)でラップする必要があります(または代わりに所定の高さを持つものでh2sをラップする)そして次にこの種のJavaScriptを使用して、不要な単語を除外できます。

var elems = document.getElementById('conainter_of_h2s').
                     getElementsByTagName('h2');

    for ( var i = 0, l = elems.length; i < l; i++) {
        var span = elems.item(i).getElementsByTagName('span')[0];
        if ( span.offsetHeight > elems.item(i).offsetHeight ) {
            var text_arr = span.innerHTML.split(' ');
            for ( var j = text_arr.length - 1; j>0 ; j--) {
                delete text_arr[j];
                span.innerHTML = text_arr.join(' ') + '...';
                if ( span.offsetHeight <= 
                                        elems.item(i).offsetHeight ){
                    break;
                }
            }
        }
    }

実際に、これを可能な解決策の基礎として使用することを考えましたが、これに基づいて、テキスト全体が表示されているか、それを短くして「 ...」それを切り取るだけでは奇妙に見えるでしょう。
BlaM 2009

3

これが別のJavaScriptソリューションです。非常に高速で動作します。

https://github.com/dobiatowski/jQuery.FastEllipsis

WindowsおよびMac上のChrome、FF、IEでテスト済み。


これは自動ではありませんが、Adam Tegenの回答よりも正確な解決策であることがわかりました。このスクリプトでは、推測ではなく、テキストの最大行数を指定する必要があります。
ドーナツ

3

純粋なCSSを使用した複数行テキストの解決策があります。これはと呼ばline-clampれていますが、Webkitブラウザーでのみ機能します。ただし、すべての最新のブラウザーでこれを模倣する方法があります(すべてIE8より新しいものです)。また、最後の行の最後の単語を非表示にする背景画像が必要なため、無地の背景でのみ機能します。方法は次のとおりです。

このhtmlを考えると:

<p class="example" id="example-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

CSSは次のとおりです。

p {
    position:relative;
    line-height:1.4em;
    height:4.2em;      /* 3 times the line-height to show 3 lines */
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(ellipsis_bg.png) repeat-y;
}

ellipsis_bg.pngは、背景と同じ色の画像で、幅は約100pxで、高さは行の高さと同じです。

あなたのテキストが手紙の途中で途切れているかもしれないので、それは非常にきれいではありませんが、それはいくつかの場合に役立つかもしれません。

リファレンス:http : //www.css-101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.php


これはすばらしいことですが、テキストが十分に短いため、このCSSは「...」を追加するため、テキストが十分に長いことを確認する必要があります。ところで:同じ回答が約1か月前にApopiiによって提供されました;)
BlaM 2013

@BlaMほぼ同じです。しかし、グラデーショントリックは巧妙で、このコードはSASSではなくCSSにあると思うので、別の答えにするのは価値があると思います。
Jules Colle 2013

3

テキストコンテンツの純粋なCSS複数行省略記号:

.container{
    position: relative;  /* Essential */
    background-color: #bbb;  /* Essential */
    padding: 20px; /* Arbritrary */
}
.text {
    overflow: hidden;  /* Essential */
    /*text-overflow: ellipsis; Not needed */
    line-height: 16px;  /* Essential */
    max-height: 48px; /* Multiples of line-height */
}
.ellipsis {
    position: absolute;/* Relies on relative container */
    bottom: 20px; /* Matches container padding */
    right: 20px; /* Matches container padding */
    height: 16px; /* Matches line height */
    width: 30px; /* Arbritrary */
    background-color: inherit; /* Essential...or specify a color */
    padding-left: 8px; /* Arbritrary */
}
<div class="container">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur eu in adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
    </div>
    <div class="ellipsis">...</div>
</div>

実際の例については、スニペットをチェックアウトしてください。


2

これはAlexと似ていますが、線形ではなくログ時間で行われ、maxHeightパラメータを取ります。

jQuery.fn.ellipsis = function(text, maxHeight) {
  var element = $(this);
  var characters = text.length;
  var step = text.length / 2;
  var newText = text;
  while (step > 0) {
    element.html(newText);
    if (element.outerHeight() <= maxHeight) {
      if (text.length == newText.length) {
        step = 0;
      } else {
        characters += step;
        newText = text.substring(0, characters);
      }
    } else {
      characters -= step;
      newText = newText.substring(0, characters);
    }
    step = parseInt(step / 2);
  }
  if (text.length > newText.length) {
    element.html(newText + "...");
    while (element.outerHeight() > maxHeight && newText.length >= 1) {
      newText = newText.substring(0, newText.length - 1);
      element.html(newText + "...");
    }
  }
};


1

Alexの関数をMooToolsライブラリに書き直しました。単語の途中に省略記号を追加するのではなく、単語のジャンプに少し変更しました。

Element.implement({
ellipsis: function() {
    if(this.getStyle("overflow") == "hidden") {
        var text = this.get('html');
        var multiline = this.hasClass('multiline');
        var t = this.clone()
            .setStyle('display', 'none')
            .setStyle('position', 'absolute')
            .setStyle('overflow', 'visible')
            .setStyle('width', multiline ? this.getSize().x : 'auto')
            .setStyle('height', multiline ? 'auto' : this.getSize().y)
            .inject(this, 'after');

        function height() { return t.measure(t.getSize).y > this.getSize().y; };
        function width() { return t.measure(t.getSize().x > this.getSize().x; };

        var func = multiline ? height.bind(this) : width.bind(this);

        while (text.length > 0 && func()) {
            text = text.substr(0, text.lastIndexOf(' '));
            t.set('html', text + "...");
        }

        this.set('html', t.get('html'));
        t.dispose();
    }
}
});


1

しかし、CSSの動作には少し驚きました。

var cssEllipsis = 
{   "width": "100%","display": "inline-block", 
"vertical-align": "middle", "white-space": "nowrap", 
"overflow": "hidden", "text-overflow": "ellipsis" 
};

省略記号をバインドするために必要なコントロールに幅を提供しない限り、私の目的は支持されませんでした。幅は追加する必要があるプロパティですか??? ご感想をお聞かせください。


1

CSSのみを使用して省略を行う

<html>
<head>
<style type="text/css">
#ellipsisdiv {
    width:200px;
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
}  
</style>
</head>
<body>
<div id="ellipsisdiv">
This content is more than 200px and see how the the ellipsis comes at the end when the content width exceeds the div width.
</div>
</body>
</html>

*このコードは現在のほとんどのブラウザで動作します。OperaとIEで問題が発生した場合(おそらく発生しないはずです)、これらをスタイルに追加します。

-o-text-overflow: ellipsis;  
-ms-text-overflow: ellipsis;

*この機能はCSS3の一部です。完全な構文は次のとおりです。

text-overflow: clip|ellipsis|string;

1

ここに建て省略記号を持っているライブラリーをプラグイン/素敵なウィジェットです:http://www.codeitbetter.co.uk/widgets/ellipsis/あなたがそれをやらなければならないことは、ライブラリを参照して、以下を呼び出します。

<script type="text/javascript"> 
   $(document).ready(function () { 
      $(".ellipsis_10").Ellipsis({ 
         numberOfCharacters: 10, 
         showLessText: "less", 
         showMoreText: "more" 
      }); 
   }); 
</script> 
<div class="ellipsis_10"> 
   Some text here that's longer than 10 characters. 
</div>

1

たとえば、CSSだけでこれをはるかに簡単に行うことができます:sassモード

.truncatedText {
   font-size: 0.875em;
   line-height: 1.2em;
   height: 2.4em; // 2 lines * line-height
   &:after {
      content: " ...";
   }
}

そして、あなたは省略記号を持っています;)


0

@acSlaterのように、必要なものを見つけることができなかったので、自分でロールバックしました。他のユーザーが使用できる場合の共有:

方法:
ellipsisIfNecessary(mystring,maxlength);
使用法:
trimmedString = ellipsisIfNecessary(mystring,50);
コードとデモのリンク:https : //gist.github.com/cemerson/10368014

2つの注釈:a)このコードは、HTML要素の実際のサイズをチェックしません。指定された長さを指定する必要があります-これは必要な機能かもしれませんが、実際には簡単です。b)文字列の最後に「...」を追加するだけです。省略記号「…」があります。
BlaM 2014

@BlaMさん、コードは実際にmaxlengthパラメータに対して長さをチェックします。少なくとも私には効果があります。とはいえ、これは私の特定の状況に対する私の控えめな1回限りのものです。上記の解決策がお客様の状況に適切に機能しない場合は、上記の解決策を自由に使用してください。
クリストファーD.エマーソン

はい、「長さ」では機能しますが、「幅」(ピクセルサイズ)では機能しません。
BlaM 2014

興味深いアイデア-そのためのサポート付きの更新バージョンを自由に作成してください。今は必要ありませんが、将来役立つかもしれません。
クリストファーD.エマーソン

0
<html>
<head>
    <!-- By Warren E. Downs, copyright 2016.  Based loosely on a single/multiline JQuery using example by Alex,
    but optimized to avoid JQuery, to use binary search, to use CSS text-overflow: ellipsis for end,
    and adding marquee option as well.
    Credit: Marquee: http://jsfiddle.net/jonathansampson/xxuxd/
            JQuery version: http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide
            (by Alex, http://stackoverflow.com/users/71953/alex)
            (Improved with Binary Search as suggested by StanleyH, http://stackoverflow.com/users/475848/stanleyh)
    -->
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>

        .single {
            overflow:hidden;
            white-space: nowrap;
            width: 10em;
            padding: 10px;
            margin: 0 auto;
            border: solid 1px blue;
        }

        .multiline {
            overflow: hidden;
            white-space: wrap;
            width: 10em;
            height: 4.5em;
            padding: 10px;
            margin: 0 auto;
            border: solid 1px blue;
        }

        .marquee {
            overflow: hidden;
            width: 40em;
            padding: 10px;
            margin: 0 auto;
            border: solid 1px blue;
        }

</style>
    <script>
        var _marqueeNumber=0;
        // mode=start,end,middle
        function clipText(text, len, mode) {
            if(!mode) { mode="end"; }
            else { mode=mode.toLowerCase(); }
            if(mode == "start") { return "&hellip;"+clipText(text,len,"_start"); }
            if(mode == "_start") { return text.substr(text.length - len); }
            if(mode == "middle") { 
                return clipText(text, len/2, "end") + clipText(text, len/2, "_start");
            }
            return text.substr(0, len) + "&hellip;";
        }

        function generateKeyframes(clsName, start, end) {
            var sec=5;
            var totalLen=parseFloat(start)-parseFloat(end);
            if(start.indexOf('em') > -1)      { sec=Math.round(totalLen/3); }
            else if(start.indexOf('px') > -1) { sec=Math.round(totalLen/42); }

            var style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML = 'body {}';
            document.getElementsByTagName('head')[0].appendChild(style);
            this.stylesheet = document.styleSheets[document.styleSheets.length-1];
            try {
                this.stylesheet.insertRule('.'+clsName+' {\n'+
                    '    animation: '+clsName+' '+sec+'s linear infinite;\n'+
                    '}\n', this.stylesheet.rules.length);
                this.stylesheet.insertRule('.'+clsName+':hover {\n'+
                    '    animation-play-state: paused\n'+
                    '}\n', this.stylesheet.rules.length);
                this.stylesheet.insertRule('@keyframes '+clsName+' {\n'+
                    '    0%   { text-indent: '+start+' }\n'+
                    '    100% { text-indent: '+end+' }\n'+
                    '}', this.stylesheet.rules.length);
            } catch (e) {
                console.log(e.message);
            }
        }

        function addClone(el, multiline, estyle) {
            if(!estyle) { 
                try { estyle=window.getComputedStyle(el); }
                catch(e) { return null; }
            }
            var t = el.cloneNode(true);
            var s=t.style;
            //s.display='none';
            s.visibility='hidden'; // WARNING: Infinite loop if this is not hidden (e.g. while testing)
            s.display='inline-block';
            s.background='black';
            s.color='white';
            s.position='absolute';
            s.left=0;
            s.top=0;
            s.overflow='visible';
            s.width=(multiline ? parseFloat(estyle.width) : 'auto');
            s.height=(multiline ? 'auto' : parseFloat(estyle.height));

            el.parentNode.insertBefore(t, el.nextSibling);

            return t;
        }
        function getTextWidth(el, multiline) {
            var t=addClone(el, multiline);
            if(!t) { return null; }
            var ts=window.getComputedStyle(t);
            var w=ts.width;
            if(multiline) {
                var es=window.getComputedStyle(el);
                var lines=Math.round(parseInt(ts.height)/parseInt(es.height))*2+0.5;
                w=w+'';
                var unit=''; // Extract unit
                for(var xa=0; xa<w.length; xa++) {
                    var c=w[xa];
                    if(c <= '0' || c >= '9') { unit=w.substr(xa-1); }
                }
                w=parseFloat(w);
                w*=lines; // Multiply by lines
                w+=unit; // Append unit again
            }
            t.parentNode.removeChild(t);
            return w;
        }

        // cls=class of element to ellipsize
        // mode=start,end,middle,marq (scrolling marquee instead of clip)
        function ellipsis(cls, mode) {
            mode=mode.toLowerCase();
            var elems=document.getElementsByClassName(cls);
            for(xa in elems) {
                var el=elems[xa];
                var multiline = el.className ? el.className.indexOf('multiline') > -1 : true;
                if(mode == "marq") {       
                    var w=getTextWidth(el, multiline);
                    if(!w) { continue; }
                    var mCls="dsmarquee"+(_marqueeNumber++);
                    var es=window.getComputedStyle(el);
                    generateKeyframes(mCls,es.width, '-'+w);
                    el.className+=" "+mCls; 
                    continue; 
                }
                if(mode == "end" && !multiline) { el.style.textOverflow="ellipsis"; continue; }
                var estyle=null;
                try { estyle=window.getComputedStyle(el); }
                catch(e) { continue; }
                if(estyle.overflow == "hidden") {
                    var text = el.innerHTML;
                    var t=addClone(el, multiline, estyle);

                    function height() {
                        var ts=window.getComputedStyle(t);
                        var es=window.getComputedStyle(el);
                        return parseFloat(ts.height) - parseFloat(es.height); 
                    }
                    function width() { 
                        var ts=window.getComputedStyle(t);
                        var es=window.getComputedStyle(el);
                        return parseFloat(ts.width) - parseFloat(es.width); 
                    }

                    var tooLong = multiline ? height : width;

                    var len=text.length;
                    var diff=1;
                    var olen=0;
                    var jump=len/2;
                    while (len > 0) {
                        var diff=tooLong();
                        if(diff > 0) { len-=jump; jump/=2; }
                        else if(diff < 0) { len+=jump; }
                        len=Math.round(len);
                        //alert('len='+len+';olen='+olen+';diff='+diff+';jump='+jump+';t='+JSON.stringify(t.innerHTML));
                        t.innerHTML=clipText(text, len, mode);
                        if(olen == len) { break; }
                        olen=len;
                    }
                    el.innerHTML=t.innerHTML;
                    t.parentNode.removeChild(t);
                }           
                //break;
                t.style.visibility='hidden';
            }
        }

        function testHarness() {
            ellipsis('ellipsis1', 'start'); 
            ellipsis('ellipsis2', 'end'); 
            ellipsis('ellipsis3', 'middle'); 
            ellipsis('marquee', 'marq')
        }
    </script>
    </head>
    <body onload="testHarness()">
    <div class="single ellipsis1" style="float:left">some long text that should be clipped left</div>
    <div class="single ellipsis2" style="float:right">right clip long text that should be clipped</div>
    <div class="single ellipsis3" style="float:center">some long text that should be clipped in the middle</div>

    <br />

    <p class="single marquee">Windows 8 and Windows RT are focused on your lifeyour friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
    &nbsp;

    <br />

    <div class="multiline ellipsis1" style="float:left">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped left(*)</div>

    <div class="multiline ellipsis2" style="float:right">right clip multiline long text, such as Test test test test test test, and some more long text that should be multiline clipped right.</div>

    <div class="multiline ellipsis3" style="float:center">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped in the middle(*)</div>

    <br />

    <p class="multiline marquee">Multiline Marquee: Windows 8 and Windows RT are focused on your lifeyour friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
    &nbsp;

    </body>
</html>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.