2026年4月28日 / 最終更新日 : 2026年4月30日対馬俊彦 HTML/CSS

文字数が多いときに行数指定でカットして最後に … (省略記号) を表示するやり方

投稿タイトルや抜粋の中に文字数が多いものがあると…

投稿タイトルや抜粋の中に文字数が多いものがあると、投稿リストを表示したときに余白が生じてしまい無駄なスペースに見えてしまうことがあります。

そのようなときに

投稿タイトルを1行で表示して、はみ出した部分をカットしたい
抜粋を最大3行で表示して、はみ出した部分をカットしたい

ということがあります。

レスポンシブ対応を考慮すると、文字数指定でカットするよりも行数指定の方がいいんですよね。

そのやり方をまとめて記事にしました。

投稿タイトルを1行で表示して、はみ出した部分をカットする

以下の CSS を追加すると、はみ出した部分の文字がカットされて、最後に … が表示されます。
title-cut は投稿タイトルに設定されているクラス名です。

.title-cut {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

抜粋を最大3行で表示して、はみ出した部分をカットする

以下の CSS を追加すると、はみ出した部分の文字がカットされて、最後に … が表示されます。
excerpt-cut は抜粋に設定されているクラス名です。

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

これ、たまに使おうとして「どうするんだっけ？」と思って、調べるのに時間がかかってたので、備忘録として書き残してみました。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / X-T9 / VK Blocks / VK Filter Search などのベクトル製品のサポート、カスタマイズを最も得意としています。

打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのウェブサイト制作・運用のサポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら