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>
<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>
<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;
}
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
jQueryプラグインを読み込んだら、１行ならclass ellipsisを、複数行ならellipsis multilineで、２つのクラスを設定してあげるだけ。
後は任意でwidthとheightを自由に設定するだけ。
奥様、簡単ざましょ！