三点リーダ jQuery 複数行対応(dotdotdot)

表示領域の高さに合わせ、はみ出さない様省略させる。
省略時、末尾に「…」を付与させ、続きがある & デザインを崩さない様にする。

jQueryプラグイン「dotdotdot」をダウンロードします。

※三点リーダー以外の文章省略方法がいくつかある様です、
気になる方はオプション等を漁ってみてください。
また、細かなライセンスもあるので、念のため目を通していただく方が無難です。

JSの記述

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.dotdotdot.js"></script>
jQuery(document).ready(function( $ ) { $('.dot').dotdotdot(); }); 

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>

実行結果

text text text text text text text text text text text text text text text text text text text text text
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク