行数単位で省略する、記事の抜粋や商品名等でたまに使うやつです。
CSSの場合行数単位なので、文字数で切りたい場合はJS(今回はjQuery)を使います。
共通のHTML
CSSを適用していない状態のHTMLです。
DEMO
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
HTML
<p class="trim">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
一行のパターン(CSS)
あまり使うことはないですが、一行のみ省略できる書き方です。
DEMO
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
CSS
.trim {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
white-space: nowrap;で折り返ししないように指定、overflow:
hidden;ではみ出た部分を非表示にします。
text-overflow: ellipsis;は省略記号(…)です。
複数行のパターン(CSS)
一番よく使うパターンです。
今回の例は4行目以降を省略します。
DEMO
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
CSS
.trim {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
-webkit-line-clampの数字を変えれば省略できる行数が変わります。
ちなみに1にすれば1行も対応できます。
文字数で省略するパターン(jQuery)
文字数で省略するパターンはCSSでは対応できないのでjQueryを使います。
今回の例は20文字以降を省略します。
DEMO
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
jQuery
$(function () {
const trimCount = 20;
$('.trim.var_count').each(function () {
let trimText = $(this).text().trim();
if (trimText.length > trimCount) {
let writeText = trimText.substr(0,(trimCount));
$(this).html(writeText += '…');
};
});
});
半角・全角関係なく指定文字数＋省略記号(…)を表示し、それ以降はカットされます。
