文字を省略する
長い文章を省略して末尾に省略記号を付けるライブラリのご紹介です。
デモ
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ライブラリのダウンロードと設置
こちらをクリックしてダウンロードしてください。
ダウンロードしたtruncate-text.jsを任意の場所へ置き読み込みます。
HTML
<script type="text/javascript" src="js/truncate-text.js"></script>使い方
第一引数（必須）に省略を適用する要素を指定します。
newを使用してインスタンスを生成します。
インスタンスを生成した瞬間に省略が反映されます。
| 引数 | 初期値 | 説明 |
|---|---|---|
| 第一引数 必須 |
適用する要素 | |
| 第二引数 | {} | オプション 詳細は次のリンクを参照 オプションの詳細 |
JavaScript
var sampleElem = document.getElementById('sample');
new TruncateText(sampleElem);HTML
<p id="sample">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>オプション
次のオプションが利用可能です。
オプションの詳細
| 名称 | 型 | 初期値 | 説明 |
|---|---|---|---|
| maxLine | number | 0 | 最大行数 （maxLengthが指定されていた場合はmaxLineが優先される） |
| maxLength | number | 0 | 最大文字数 （maxLineが指定されていた場合はmaxLineが優先される） |
| ellipsis | string | '...' | 省略記号 |
| defaultOn | boolean | true | 初期段階で処理を行うかどうか |
| onClass | string | 'ellipsis' | 反映中のクラス名 |
| responsive | boolean | false | レスポンシブに対応するかどうか |
JavaScript
var sampleElem = document.getElementById('sample');
new TruncateText(
sampleResponsiveElem,
{
maxLine : 2,
responsive : true
}
);メソッド
次のメソッドが実行可能です。
| メソッド | 説明 |
|---|---|
| .on() | 省略の反映 |
| .off() | 省略の解除 |
JavaScript
var sampleElem = document.getElementById('sample'),
offBtnElem = document.getElementById('off');
var tt = new TruncateText(sampleElem);
// 解除
offBtnElem.onclick = function() {
tt.off();
};