CSSで長いテキストを(…)で省略する方法:1行と複数行対応

CSSで規定の幅から文字数が多いためにはみ出てしまうテキストを三点リーダー(…)で省略する方法です。
今は、複数行でもCSSのみで実装可能ですね。昔はjQueryとか使用してごちゃごちゃやっていた気がします。
古いブラウザなどにきちんと対応する場合は、今でもJavaScript実装がおすすめですが、モダンなブラウザのみが対象であれば、CSSのみのほうが簡単です。

CSSではみ出したテキストを省略する。1行の場合

text-overflowを使用します。
参考⇒text-overflow | MDN
使用するときには、ちょっとだけ決まり事があります。
overflow: hidden;およびwhite-space: nowrap;と一緒に使う
・text-overflowはBlock要素に対してinline(横方向)にはみ出たテキストに対して効果がある

BLOCK要素サンプル

CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。

CODE

// HTML
<div class="text-overflow" style="max-width: 200px;">
    CSSではみ出したテキストを省略するテストです。
</div>

// CSS
.text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

 

TABLEサンプル

table-cell属性でも使用できますが、注意点があります。
table自体にもwidthを指定する必要があります。
指定してあればwidth:100%;などでも構いません。tdからはみ出た段階で省略されます。

CSSではみ出したテキストを省略するテストです。

CODE

// HTML
<table style="max-width: 200px;">
    <tr>
        <td class="text-overflow" style="max-width: 200px;">
            CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。
        </td>
    </tr>
</table>

 

text-overflowが効かない?動作しない?

最近はレイアウトを組むときにdisplay:flex;でフレックスを使用するケースが増えてきています。ちょっとしたはまりどころですが、text-overflowが指定されている要素がフレックスだと、テキスト省略が効きません。
なので使用するときはdivなどで囲ってあげるとよいですね。

複数行でもテキストがはみ出した時に省略する方法

こちらはモダンブラウザのみ対応しています。(chrome,safari)

複数行サンプル

CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。

CODE

// HTML
<div class="text-overflow-lines" style="max-width: 200px;">
CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。
</div>

// CSS
.text-overflow-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

 
今となってはdisplay:flex;があるので活躍の場がなくなったフレックスボックスですが、こんな使い道がありましたね。
上記は下記サイトを参考にしています。モダンブラウザ以外の対応方法も記述されています。

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろ

CSS/SASSのおすすめ書籍

CSSやSCSSは基本がわかればあとはGoogle先生で調べた方が早いと思います。CSSの仕組みやSASSの使い方だけわかれば基本はOKです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
htmlの基礎から学べるのでおすすめ

Web制作者のためのSassの教科書
SASSの基本が学べます。

CSSで文字数オーバーしたときに、(…)で表示する方法 – D-NET

CSSで文字数オーバーしたときに、(…)で表示する方法 – D-NET

[…] CSSで長いテキストを(…)で省略する方法:1行と複数行対応 […]

Comments are closed.