HTMLの「スマート」オーバーフロー：省略記号「...」を最後にリンクを付けてコンテンツ全体を表示する方法はありますか？

Question

私は拘束サイズの<div>を持っていますが、その中に複数行のテキストを入れたいのですが、オーバーフローする場合は、最後に「...」を入れてコンテンツ全体を表示したい別のページに

これはJavascript/CSSで実行可能ですか？私はちょっと探してみましたが、何を探したらいいのか分かりません。

Hmm - CSS text-overflow: ellipsis;があるようですが、省略記号にリンクを付けることはできません。

---

this answer本当に近いですが、それだけでオーバーフローし始めた場合、省略記号の一部のみが現れる場合があります。

---

ライブラリの要件：私は、（やや不本意ながら）jQueryのを使用することができていないフレームワーク依存クロスブラウザのソリューションを好むだろう。

Answer 1

ここでは、クラスが.smart-overflowの要素を反復処理する基本的な例を示します。コンテンツがクリップされる場合、ellipsis-linkのクラスを持つクリック可能なa要素が追加されます。リンクには、クリックイベントリスナーがあり、隠されたコンテンツはoverflow: hiddenで公開されます。この例は、1行でのみ機能します。サポートされているブラウザで複数の行に対応するアプローチについては、下の代替例を参照してください。上記の例で

var elements = document.querySelectorAll('.smart-overflow'); 
 
Array.prototype.forEach.call(elements, function (el) { 
 
    var link = document.createElement('a'); 
 
    link.href = '#'; link.className = 'ellipsis-link'; 
 
    
 
    if (el.offsetWidth < el.scrollWidth) { 
 
    link.addEventListener('click', function (e) { 
 
     e.preventDefault(); 
 
     el.classList.remove('smart-overflow'); 
 
    }); 
 
    el.appendChild(link); 
 
    } 
 
});

p { 
 
    width: 200px; 
 
    position: relative; 
 
} 
 
.smart-overflow { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
a.ellipsis-link { 
 
    display: none; 
 
} 
 
.smart-overflow a.ellipsis-link { 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; bottom: 0; 
 
    width: 1.2em; 
 
    height: 100%; 
 
    cursor: pointer; 
 
}

<p class="smart-overflow">No ellipsis.</p> 
 
<p class="smart-overflow">This is a longer string of text which should have ellipsis. This is a longer string of text which should have ellipsis.</p> 
 
<p class="smart-overflow">Another string of text which should have ellipsis. Another string of text which should have ellipsis.</p>

、text-overflow: ellipsisは、それが単一のラインのために働くことを意味して動作するためにwhite-space: nowrapを必要とします。

複数の行をサポートしたい場合は、サポートされているブラウザでこれを行うことができます。それでも問題が解決しない場合は、以下のjQueryソリューションをご覧ください。 this libraryを使用して、フルブラウザをサポートした

var elements = document.querySelectorAll('.smart-overflow'); 
 
Array.prototype.forEach.call(elements, function (el) { 
 
    var link = document.createElement('a'); 
 
    link.href = '#'; link.className = 'ellipsis-link'; 
 

 
    link.addEventListener('click', function (e) { 
 
    e.preventDefault(); 
 
    el.classList.remove('smart-overflow'); 
 
    }); 
 
    el.appendChild(link); 
 
});

p { 
 
    width: 200px; 
 
    position: relative; 
 
} 
 
.smart-overflow { 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
    -webkit-box-orient: vertical; 
 
    max-height: 2.2em; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
a.ellipsis-link { 
 
    display: none; 
 
} 
 
.smart-overflow a.ellipsis-link { 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; bottom: 0; 
 
    width: 4.2em; 
 
    height: 1.2em; 
 
    cursor: pointer; 
 
}

<p class="smart-overflow">No ellipsis.</p> 
 
<p class="smart-overflow">This is a longer multi-line string of text which should have ellipsis. This is a longer string of text which should have ellipsis.</p> 
 
<p class="smart-overflow">Another multi-line string of text which should have ellipsis. Another multi-line string of text which should have ellipsis.</p>

jQueryの複数行の代替。

$('.smart-overflow').dotdotdot({ 
 
    ellipsis: '', 
 
    wrap: 'word', 
 
    callback: function(isTruncated, content) { 
 
    var self = this; 
 

 
    if (isTruncated) { 
 
     $(this).append($('<a/>', { 
 
     class: 'ellipsis-link', 
 
     text: '...', 
 
     href: '#', 
 
     click: function(e) { 
 
      e.preventDefault(); 
 
      $(this).remove(); 
 
      $(self).removeClass('smart-overflow is-truncated').trigger("destroy"); 
 
     } 
 
     })); 
 
    } 
 
    } 
 
});

p { width: 200px; } 
 
.smart-overflow { max-height: 2.8em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.4/jquery.dotdotdot.min.js"></script> 
 
<p class="smart-overflow">No ellipsis.</p> 
 
<p class="smart-overflow">This is a longer multi-line string of text which should have ellipsis. This is a longer string of text which should have ellipsis.</p> 
 
<p class="smart-overflow">Another multi-line string of text which should have ellipsis. Another multi-line string of text which should have ellipsis.</p>

Answer 2

チェックアウトこれらのjQueryプラグイン：

https://github.com/jjenzz/jquery.ellipsis https://github.com/rviscomi/trunk8

ここでリンクにして省略記号を作ることと同様にそれらが応答するために、trunk8をラップ、私はしばらく前に書いたいくつかのコードは、です。

(function($, window, document, undefined) { 

    'use strict'; 

    window.seeMore = function() { 
    function addSeeMoreLinks() { 
     $article.find('p').trunk8(options).each(function() { 
     var $this = $(this); 

     if (0 === $this.find('.trunk8').length) { 
      $this.append(' <a href="#" class="seeMore">see more</a>.'); 
     } 
     }); 
    } 

    function removeSeeMoreLinks() { 
     $article.find('p').each(function() { 
     $(this).find('.seeMore').remove(); 
     }); 
    } 

    function setupSeeMoreLinks() { 
     addSeeMoreLinks(); 
     $(window).resize(function() { 
     removeSeeMoreLinks(); 
     addSeeMoreLinks(); 
     }); 
    } 

    var 
     $article = $('.blogArticleList article'), 
     options = { 
     lines: 6, 
     fill: '&hellip; <a href="#" class="trunk8">see more</a>.', 
     tooltip: false 
     }; 

    setupSeeMoreLinks(); 
    }; 

    if (window.addEventListener && $().trunk8) { 
    window.seeMore(); 
    } 

})(jQuery, window, document);