【Cocoon】投稿タイトルの長い文字列を3点リーダー(…)で省略する方法

Cocoonの投稿タイトルが長い文字列の場合、タイトルが全て表示されて見栄えが悪くなってしまします。

この記事では複数行にも対応した、長すぎる文字列を三点リーダー（…）で省略する方法についていくつかご紹介します。

 

 

3点リーダーの表示方法 (複数行の場合)

追加CSSで対応

「外観」→「カスタマイズ」→「追加CSS」をクリックします。

下記のCSSを追加します。

「-webkit-line-clamp」の数字を変更することで何行まで文字を表示するかを変更することができます。

例えば「-webkit-line-clamp: 4;」とすると4行目までは文字を表示して、5行目からは3点リーダー(…)が表示されるようになります。

 

/* 投稿一覧 タイトル */
.entry-card-content h2 {
  /* 三点リーダー対応 */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

 

CSSを追加することで下記のように3点リーダーが表示され、長いタイトルが省略されます。