multiline ellipsis 備忘

このページは、CSSのプロパティ text-overflowとその値 ellipsis に関するメモです。

text-overflowは、文字列全体が 枠のサイズからあふれた場合にどのように表示するかを指定します。

ellipsisは、省略記号という意味で、文字があふれた場合は、省略記号を使って 「表示されている文字列は、一部表示が省略されていますよ」という事を明示するために使われます。

省略記号の代表選手は三点リーダーですが、省略記号そのものはそれに限らず、細かく指定することが出来ます。

詳細については、「text-overflow - CSS | MDN」等を読んでみてください。

このようなスタイル指定は、グリッド表示で大量のコンテンツを表示する場合には、必須のテクニックといってもいいと思います。

スタイルをより完全にするためにjavascriptもよく使われますが、このページはCSSにフォーカスしています。


text-overflow , -webkit-line-clamp, -o-ellipsis-lastline 等、文字省略プロパティについて、いろいろと考えながら、

Raindrops1.457で

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 class="trancate" data-rows="2">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>

クラスと行数指定が可能な仕組みをjavascriptを使って作成しました、この過程でCSSだけのテストも行いましたので、メモに残します。

CSSだけで、複数行 ellipsis

CSSだけで実装する場合、複数行で、ブラウザサポートが足りないために、それを補完するCSSが必要になるという事が課題です。

Can I Use css-line-clamp? Data on support for the css-line-clamp feature across the major browsers from caniuse.com.

一行で表示する場合は、ブラウザの多くはサポートしていますが、

.truncate {
 width: 250px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

二行以上にまたがる省略は、手を加える必要がありそうでした。

youtubeのタイトルリンクを参考に、以下のスタイルで、最低限の表示は出来そうでした。(prefixは、サポートブラウザ毎に追加が必要です)

適用例

HTML

<div style="width:196px;"><a href="https://www.youtube.com/watch?v=aRvEGIyHm5c" class="tooltip yt-ui-ellipsis rows-2" title="ブルゾンちえみ しゃべくり初登場!ぺりぺり007で丸裸!?" aria-describedby="description-id-232080" dir="ltr">ブルゾンちえみ しゃべくり初登場!ぺりぺり007で丸裸!?</a></div>

CSS

.yt-ui-ellipsis {
 background-color: #fff;
 display: block;
 line-height: 1.3em;
 overflow: hidden;
 position: relative;
 text-overflow: ellipsis;
 white-space: normal;
 word-wrap: break-word;
}
.yt-ui-ellipsis::after{
 content:'\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0';
 float:right;
 z-index:999;
 position:relative;
 background:inherit;
}
.yt-ui-ellipsis::before {
 content: '\002026';
 right: 0;
 bottom:0;
}
.yt-ui-ellipsis::before {
 background-color: inherit;
 position: absolute;
}
@supports (-webkit-line-clamp:2) {
 .yt-ui-ellipsis {
	 text-overflow: ellipsis;
	 white-space: normal;
	 display: -webkit-box;
	 -webkit-line-clamp: 2;
	 -webkit-box-orient: vertical;
	}
	.yt-ui-ellipsis::before {
	 content: '';
	 position:static;
	}
	.yt-ui-ellipsis::after{
	 float:none;
	 content:'';
	}
}
.rows-1{
 max-height:1.3em;
}
.rows-2{
 -webkit-line-clamp: 2;
 max-height:2.6em;
}
.rows-3{
 -webkit-line-clamp: 3;
 max-height:3.9em;
}

新着記事

コメントは受け付けていません。