CSS ellipsis で複数行を省略するjQueryプラグイン ITかあさん

ITかあさん

CSS ellipsis で複数行を省略するjQueryプラグイン

三点リーダーで省略するCSSのellipsis、jQueryプラグインで複数行にも対応出来るよ

「ちょっと奥様!ellipsisのテキストの省略は複数行には非対応ざますのよ!」

jquery.ellipsisで複数行でも三点リーダー付で省略できるよ

Javascript

//別途jQueryは読み込んでね
<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

HTML

<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: 80px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

CSS

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

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

jQueryプラグインを読み込んだら、1行ならclass ellipsisを、複数行ならellipsis multilineで、2つのクラスを設定してあげるだけ。
後は任意でwidthとheightを自由に設定するだけ。

奥様、簡単ざましょ!

初夏のJavaScript祭 in サーキュレーションビル ForPro