03-6416-3903

平日10:00〜18:00

CONTACT

最新情報 & コラム

CSSでできる!テキストが長くなってしまった時にはみ出した箇所を「…」にして省略する方法

ALLWEB

記事一覧など動的にテキストが入る部分は、文章量が記事に依存するので、決まった行数で省略をしてあげないと、高さが不揃いになってしまい、レイアウトが美しくありません。

しかし、CSSの「overflow:hidden;」と「line-clampプロパティ」などを使って、簡単に解決することができます。

今回は、長くなってしまった文章を指定した行数で省略する方法をご紹介します。PHPなどは使わず、CSSのみの処理なのでとっても簡単です!

文章が1行の場合

文章が1行の場合は「line-clampプロパティ」は使用せず、とてもシンプルなコードで実装することができます。

p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

「white-space: nowrap;」で文章を1行にしています。「overflow:hidden;」ではみ出した箇所を非表示にし、「text-overflow: ellipsis;」で「…」を末尾に追加しています。

文章が複数行の場合

「text-overflow: ellipsis;」は複数行になると適用されなくなってしまうので、代わりに「line-clampプロパティ」を使用します。

line-clampはクランプ文字(…)を付与するというプロパティですので、非表示にする行数に応じて数字を変更します。(3行目で非表示にする場合は「3」)

その他、line-clamp以外にも3つのプロパティを加えます。

p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

IEへの対応はどうする?

Can I useでline-clampプロパティの対応状況を見ると、IEでは対応していません。

簡単な対処方法としては、line-heightとmax-heightを設定し表示領域の高さを定義してあげるという方法がありますが、3点リーダーを表示することができません。

IEでどうしても3点リーダーを表示したいという場合は、疑似要素でやや強引にできそうな気はしますが、今回は「行数に応じて非表示にする」までの応急処置の方法をご紹介します。

示領域の高さを定義する

先ほどのコードにline-heightとmax-height追記してあげます。

この時に、max-heightの数値はline-heightの数値 × 行数で出します。例えば、3行で文章を隠したい場合は、line-heightが1.5emの時はmax-heightは4.5emとなります。

※単位はemを使うとわかりやすいでしょう。

.text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    max-height: 4.5em;
}

これで行数に応じて非表示にすることができます。