【CSS】webkit-line-clampで文章を省略

-webkit-line-clampは、ブロック要素のテキスト行数を制限するために使用される非標準のCSSプロパティです。これは、AppleのSafariやGoogleのChromeブラウザで使用されるWebkitレンダリングエンジンに固有のものです。

このプロパティを使用するには、省略したいテキストを含むブロック要素に overflow: hiddendisplay: -webkit-box プロパティを適用し、-webkit-line-clamp プロパティで表示したい行数を指定する必要があります。

これは、これらのプロパティを使用してテキストを切り詰める方法の例です。

.truncated-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

この例では、.truncated-text要素内のテキストブロックは3行に制限されます。追加のテキストは非表示になります。なお、これは非標準であり、一部のブラウザでのみ動作します(Safari、Chromeなど)。