Elementorで「投稿ウィジェット」や「ループグリッド」を使って記事一覧を作っているとき、こんな悩みはありませんか？ 「記事によってタイトルの長さが違うから、ボックスの高さがガタガタになる…」 「長いタイトルは『…』で省略したいけど、短いタイトルだと余白がなくなってデザインが崩れる」
今回は、「文字数が多くても少なくても、常に3行分の高さを確保し、それ以上は『…』で省略する」というCSSカスタマイズをご紹介します。 これを使えば、見た目の高さがピシッと揃った美しいレイアウトが実現できます。
Elementorで「投稿ウィジェット」や「ループグリッド」を使って記事一覧を作っているとき、こんな悩みはありませんか？ 「記事によってタイトルの長さが違うから、ボックスの高さがガタガタになる…」 「長いタイトルは『…』で省略したいけど、短いタイトルだと余白がなくなってデザインが崩れる」
今回は、「文字数が多くても少なくても、常に3行分の高さを確保し、それ以上は『…』で省略する」というCSSカスタマイズをご紹介します。 これを使えば、見た目の高さがピシッと揃った美しいレイアウトが実現できます。
完成イメージ
長いタイトル（4行以上）： 3行目でカットされ、末尾に「…」がつく
短いタイトル（1行だけ）： 3行分の高さ（余白）が確保され、隣のボックスと高さが合う。
編集画面で、高さを揃えたい**「見出しウィジェット（タイトル）」を選択し、「高度な設定」タブ ＞ 「カスタムCSS」**に以下のコードを貼り付けてください。
selector .elementor-heading-title {
/* 1. 行間の設定 */
line-height: 1.6em;
/* 2. 高さの固定（行間 × 行数） */
/* ここでは 1.6em × 3行 = 4.8em に設定 */
height: 4.8em;
/* 3. 指定した行数を超えたら「...」にする設定 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* ここで3行制限 */
overflow: hidden;
}たったこれだけで、高さが強制的に統一されます！
ご自身のサイトのデザインに合わせて数値を変更したい場合は、以下のポイントを調整してください。
まずは文字の読みやすさに合わせて line-height を決めます。
例：1.5em や 1.6em が一般的です。
何行まで表示させるかを -webkit-line-clamp で指定します。
例：3行まで表示したいなら 3
ここが一番のポイントです。**「1行でも高さを保つ」**ために、heightには以下の計算式で出した数値を入力します。
height = 行間 × 行数
例：3行で固定したい場合
行間 1.6em × 3行 = 4.8em
例：2行で固定したい場合
行間 1.5em × 2行 = 3.0em
この height を指定することで、文字が1行しかなくても、空っぽの空間（余白）が確保され、隣の長いタイトルの記事と枠の大きさが揃うようになります。
もし「見出しウィジェット」ではなく「テキストエディタウィジェット」を使っている場合は、コードの1行目を以下のように変えてください。
selector .elementor-text-editor {
/* 中身は同じ */
line-height: 1.6em;
height: 4.8em;
/* ...以下省略 */
}JavaScriptなどの難しいプログラムを使わなくても、数行のCSSだけで「高さ揃え」と「文字数制限」は同時に実現できます。特にスマホ表示などでタイトルが長くなりがちなサイトでは非常に有効ですので、ぜひ試してみてください。
