BLOG
複数行でも表示領域の合わせて文字列に「…」を付与する方法
2015/2/17
クライアントサイドで表示領域から文字列がはみ出す場合「…」をつける方法はcssのtext-overflowを使う方法があります。
text-overflowを有効にするにはwidthを指定し、overflowはvisible以外、white-spaceにnowrapを指定する必要があります。
下記サンプルCSSです。
1 2 3 4 5 6 |
.sample { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:200px; } |
しかしこの方法だと複数行に対応していません。
そこでJavaScriptを使って文字を加工します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$(function() { $('.sample').each(function() { var target = $(this); var html = target.html(); var clone = target.clone(); clone .css({ display: 'none', position : 'absolute', overflow : 'visible' }) .width(target.width()) .height('auto'); target.after(clone); while((html.length > 0) && (clone.height() > target.height())) { if(html.match(/<("[^"]*"|'[^']*'|[^'">])*>$/)){ html = html.replace(/<("[^"]*"|'[^']*'|[^'">])*>$/, ''); } else { html = html.substr(0, html.length - 1); } clone.html(html + '…'); } target.html(clone.html()); clone.remove(); }); }); |
クライアントサイド特有のスクリプトになります。ちょっと不思議。。
対象の文字列を後ろから1文字ずつ削除していき、高さを判定しています。
htmlタグがある場合はいっきに削除し、閉じタグだけ削除してしまってもjQueryが自動的に補完します。
http://tech.kayac.com/archive/jquery-detail-tips.html
文字数が多いとけっこう重い処理になると思いますのでサーバサイドでの対応が必要です。
Tag:JavaScript