CMSなどを導入するサイトの場合、記事やタイトルのまちまちな長さの文字列を一定の長さまで達したら三点リーダーをつけて省略したい…といった需要は結構あるんじゃないかと思います。
そんな時、PHP側で文字数カットをしても良いんですが半角や全角、記号でカウントされる文字やスペースの量が違ったりしてなかなか見た目的に綺麗にはいかないことが多いです。
今回はそんな時に便利なプラグイン「Shave」を紹介します。
髭剃りのように必要な長さでスパっとカットしてくれます。基準が「height」なので行数にも対応することが出来ます。
用意するもの
コアファイルはGitHubからダウンロードします。
必須なファイルはダウンロードしたディレクトリのdistの中に入っているshave.jsかjquery.shave.jsです。まあ実際に使うのは圧縮したminの方が良いでしょう。
<script src="shave.js"></script>
基本的な使い方
使い方はシンプルで対象の要素と高さを指定すればその高さで切り取ってくれます。ここで言う高さの値はpxです。
shave(".test", 50); //.testは高さ50pxで切り取られます。
$(".test").shave(50); //jQueryだとこう
これだけだとシンプルに高さで切り取るだけなので高さ指定とhiddenで隠すのと変わらないのでオプションをつけます。
付けられるオプションはclassnameとcharacterの２つです。
shave(".test", 50, {classname:"classname", character:"…"});
$(".test").shave(50, { classname:"your-css-class", character:"…"});
classnameは”はみ出した分のテキスト”を囲むタグのclass名を任意のものに変更できます。
characterは切り取った末尾に付与する文字列を指定できます。上記の例では三点リーダーを指定しています。
ファイル自体も非常に軽量なのでCMSでの文字数制限に悩んでいる際は選択肢のひとつとしていかがでしょうか。
