三点リーダ jQuery 複数行対応（dotdotdot）
表示領域の高さに合わせ、はみ出さない様省略させる。
省略時、末尾に「…」を付与させ、続きがある事と、デザインをなるべく崩さない様に配慮できる。
jQueryプラグイン「dotdotdot」をダウンロードします。
※三点リーダー以外の文章省略方法がいくつかあります、
気になる方はオプション等を漁ってみてください。
また、細かなライセンスもあるので、念のため目を通していただく方が無難です。
実行結果
text text text text text text text text text text text text text text text text text text text text text
JSの記述
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.dotdotdot.js"></script>
<script>jQuery(document).ready(function( $ ) { $('.dot').dotdotdot(); }); </script>
CSSの記述
.boxwrap {
width: 250px;
height: 70px;
}
.inbox {
width: 250px;
height: 70px;
font-size: 14px;
}
htmlの記述
<div class="boxwrap"> <div class="inbox dot">text text text text text text text text text text text text text text text text text text text text text</div> </div>
