_truncate

文字が横幅に収まりきらなくなった場合に省略記号を表示します。

引数型初期値説明
@include _truncate($line, $line-height);
$lineNumber1表示する行数
$line-heightNumbernull指定すると -webkit-line-clamp プロパティに対応していないブラウザの表示を最適化できる

1行の省略

引数を指定しなければ1行の省略となります。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="element">...</div>

.element {
  @include _truncate;
}

2行以上の省略

3行目に省略記号が表示され、-webkit-line-clamp プロパティに非対応のブラウザでは違和感がないように調整されます。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
<div class="element">...</div>

.element {
  @include _truncate(3, 1.7);
}

ただし、非対応のブラウザでは省略記号 ... は表示されません。