CSS3

プロパティ

line-clamp

→●、mdn

可視になる行数の制限法： 略式プロパティ。

line-clamp プロパティは、［max-lines、block-ellipsis、continue］プロパティ用の略式プロパティである。

課題： 試験的な実装には、この略式とその下位プロパティにより定義される全部的なふるまいに従うことが奨励されるが、今の所、作者には略式プロパティのみが公開される。これは、もっと手直しする余地を残しておくためである ― 特に、下位プロパティやその値は改称され得る。

このプロパティは、ブロックコンテナの内容を指定された行数に制限できるようにする。残りの内容は外へ断片化され、描画されなくなる／測定されなくなる。また、任意選択で、最後の行ボックスの中へ内容を挿入して、［切り落とされた／中断された］内容の継続性を指示できるようにする。

none

<integer> <'block-ellipsis'>?

<DIV style="width:100px;
 line-clamp:2 '…（続く）';
 border:1px solid red;
">あああああああああああああああ
</DIV>

次の例では、各記事の頭部にある段落は、短くされたメニュー内に挙げられ、“… （続きを読む）”で終端する 5 行の中に収まるよう切り落とされる：

CSS：

li {
  line-clamp: 5 "…（続きを読む）";
}
strong {
  display: block;
  text-transform: uppercase;
}

HTML：

<li><a href="arch-effect">アンチアーティキュレーテッドバイラテラルスペキュレイティブクラスタスレッディンググリッドコンピューティングボッタクリアーキテクチャには、リレーショナルディストリビューテッドシンジケーションフィードバックシナジーコテンパンエフェクトがあります。</a></li>

表示結果：

テスト