📚
三点リーダーまとめ
はじめに
アウトプットの練習のために投稿してみました！
三点リーダーを自分なりにまとめてみましたので間違ったところなどがあれば、どんどん指摘お願いします。(間違い多いと思いますが、優しくお願いします。。。)
参考コード
- codesandbox で demo を書いて見ました。
一行の時の三点リーダー(詳しくが上記の参考コードのFirstLine を見てください。)
- 一行の際の三点リーダー
<div className="normal">
この文章は三点リーダーを試すものです。この文章は三点リーダーを試すものです。この文章は三点リーダーを試すものです。この文章は三点リーダーを試すものです。この文章は三点リーダーを試すものです。この文章は三点リーダーを試すものです。
</div>
/* はみだし部分の隠す。 */
overflow: hidden;
/* 省略部分の省略記号を設定する。 */
text-overflow: ellipsis;
/* 一行で書くため、折り返さないようにする。 */
white-space: nowrap;
複数の時の三点リーダー(詳しくが上記の参考コードのMultipleLine を見てください。)
- 複数の時は webkit を使用する。
/* はみだし部分の隠す。 */
overflow: hidden;
/* -webkit-boxに指定 */
display: -webkit-box;
-webkit-box-orient: vertical;
/* 行数 */
-webkit-line-clamp: 3;
min-width:0 の三点リーダー(詳しくが上記の参考コードのMinWidth を見てください。)
- flex、grid 等で自動的に幅が確保されてはみ出してしまう時に使用する。
まとめ
- 基本的にブロック要素に使用する。
- 先頭だけ、後ろだけを三点リーダーする時は、width を当てる方が良さそう。
- 複数行の時は webkit を使用する。(色々変化はありそう。)
- min-width: 0 は flex がネストした時やはみ出してしまう時に使用する。
Discussion