【複数行対応も】文字列の末尾を三点リーダーにする対応

三点リーダー対応の備忘録です。

三点リーダーとは

これですね。

(参照：https://collab-it.net/2018/07/1382/ より)

単一行のでの三点リーダー

単一行の三点リーダー or 複数行の三点リーダーで実装は異なります。

まずは単一行から見ていきましょう。

以下、コンポーネントのコードです。

<>
  <Content>
    <div className={styles.postPreview}>
      <p>ここを三点リーダーしたい!!!!!!!!!!!!!</p>
    </div>
  </Content>
</>

postPreview に以下のcssを追加します。

.postPreview p {
  /* 三点リーダー対応 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

これで三点リーダーにできます。

複数行での三点リーダー

2行以上の文の最後を三点リーダーにしたい場合は以下のようにします。
今回は2行の例です。

.postPreview p {
  /* 三点リーダー対応 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
}

こうなります。

-webkit-line-clampの値を変更することで３〜行にも対応できます。

スクロールバー対策として overflow: hidden; も書いています。

三点リーダーはよく使うので覚えておこうねって話。