AutoellipsisというjQueryプラグインを使用しています。
固定の高さでテキストの最後に「...」を追加します。
例えば:
省略記号と高さの場合:
<div style="height 20px;">
Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ..
</div>
省略記号も高さもありません:
<div>
Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam dolore magna aliquam
</div>
省略記号を適用するには、これを行うだけです(省略記号は、要素に高さがある場合にのみ適用されます)。
// Apply ellipsis
$j('.reply-content p').ellipsis();
HTML:
<div class="reply-content">
<span class="topic-author-link">
<span class="topic-post-date">
<span class="bbp-admin-links">
<p>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam dolore magna aliquam erat volutpat.</div>
</p>
<!-- etc... -->
続きを読むボタンを追加したいと思います。
Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat euismod tincidunt ut laore tincidunt utlaoreet...続きを読む
したがって、省略記号の直後にある[続きを読む]リンクをクリックすると、全文が表示されます(たとえば、2行のテキストだけを保持します)。
これを達成するための提案はありますか?
編集:
プラグインオプション(念のため):
.ellipsis([セレクター]、[オプション])
jQueryの選択で省略記号を実行します。オプションのセレクターは、省略記号操作の影響を受けるサブ要素を定義します。セレクター省略記号を実行するサブ要素を選択するセレクター。セレクターが指定されていない場合、プラグインはデフォルトですべての子要素に対して省略記号を実行します。optionsメソッドに渡す追加オプションのマップ。サポートされているのは次のとおりです。
省略記号使用する省略記号の文字または文字列。デフォルトは「...」(3つのドット)です。
setTitle影響を受ける要素のtitle属性を元のコンテンツで設定します。never、onEllipsis、またはalwaysのいずれかに設定できます。onEllipsisを使用する場合、title属性は、要素のコンテンツが実際に省略された場合にのみ設定されます。デフォルトはneverです。
live trueに設定すると、jQueryの選択に一致する現在および将来の要素に対して省略記号を実行します。また、ターゲット要素の寸法が変更されたときに省略記号を再適用します。このモードは選択要素をポーリングするため、注意して使用してください。デフォルトはfalseです。
このメソッドは、連鎖の目的でjQueryオブジェクトを返します。