文字数が多い場合に「…」を表示する方法

公開日:2021年09月22日

以下のように文字数が多い場合は「…」を表示する方法

通常は「…」なしで文章を表示する。

文字数が多い場合は最後を「…」として、はみ出た文字を隠す。

表示行数が1行の場合

幅300pxを超える場合に「…」を表示する方法です。幅300px部分を適宜変更して利用します。

.text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 300px;
}

幅300pxで改行し3行を超えた場合に「…」を表示します。幅300px部分を適宜変更し、行数は「-webkit-line-clamp: 3;」部分を変更します。

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

同じカテゴリーのコンテンツ