こんにちは！さこちゃんです。
今回は「テキストを行数制限して3点リーダーで表示させる方法」についてです。
まろんちゃん
文字量が多いんだよな〜
3行目以上になったら「…」で表示することなどできるのかな・・・
さこちゃん
ありまーす！CSSを4行書くだけです。いかにも超簡単です。
デモ確認
デモはこちら。
テキストが3行以上になると「…」になります。
HTML構造を作る
HTMLはこちらです。画像パスは環境にあわせて書き換えてください。
<body>
<div class="allwrap" id="allwrap">
<div class="flex-box">
<div class="img"><img src="./assets/img/demo10_img01.jpg" alt=""></div>
<div class="txt">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>
</div>
</div>
</body>CSSを書く
次にCSSを書きます。コードはこちらです。
/*レイアウト調整*/
.allwrap {
position: relative;
width: 100%;
height: 100vh;
max-height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
}
.flex-box {
width: 50%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.img, .txt {
width: 47%;
}
.img img {
width: 100%;
height: auto;
vertical-align: bottom;
}
/*今回の肝！*/
.txt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.txt p {
font-size: 16px;
line-height: 1.7;
text-align: left;
margin: 0;
}
/*レスポンシブ調整*/
@media screen and (max-width:740px) {
.flex-box {
width: 80%;
flex-direction: column;
}
.img, .txt {
width: 100%;
}
}解説
今回のポイントは以下の記述です。
.txt クラスを持つ要素に対して 「最大3行まで表示し、以降は省略（…）」 という表示制御をしています。
/*今回の肝！*/
.txt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}display: -webkit-box;
ブラウザに「この要素をフレキシブルなボックス（伸縮可能な箱）」として扱わせる指定です。複数行の省略表示を可能にするための特殊な表示モードとなっています。
-webkit-box-orient: vertical;
ボックスの方向を「縦」に設定します。つまり、縦に行を積み上げるレイアウトになる（行ベース表示）というわけなのです。
-webkit-line-clamp: 3;
最大「3行」まで表示するという指示です。これが行数制限の中心となる指定となります。数字を変えればその数の最大表示ができます。
例えば-webkit-line-clamp: 10; にした場合、10行までの表示が可能になります。
overflow: hidden;
最後に大事なのがこちら。指定された最大行数（3行）を超える内容は表示しない（非表示にする）という指示です。
おわりに
いかがでしょうか？
今回は、要素をキラッと光らせる方法について解説しました。
CSSアニメーションだけで手軽に再現できるのが便利ですね。
ぜひ参考にしてみてください！