| 属性名 | line-clamp |
|---|---|
| 値 | none | <integer> |
| 初期値 | none |
| 参考 | https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp |
| 仕様 | https://w3c.github.io/csswg-drafts/css-overflow-4/#propdef-line-clamp |
長い文章の最初の数行のみを表示したい際、ボックスの高さではなく「3行表示」など行数で指定したい場合に利用できます。
| 値 | 説明 |
|---|---|
| none | 行数を制限しません。 |
| <integer> | 表示したい行数を指定します。 |
display に -webkit-box または -webkit-inline-box、overflow に hidden が設定されている場合に有効です。Firefox の場合は -webkit-box-orient に vertical の設定も必要です。
.example-box {
width: 20rem;
border: 1px solid #999;
padding: .2rem;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
<div class="example-box"> Once Upon a time, there lived an old man and an old woman in a small village. The man went to the mountain to gather firewood. The woman went to the river to wash their clothes. </div>