CSSだけで長い文字列を省略。末尾に「…」を付けて表示する方法

CSSだけで長い文字列を省略。末尾に「…」を付けて表示する方法developer's blog

記事のタイトル一覧表示等、リスト表示の時にリンク先の末尾が「…」と省略されて表示されているのを良く見かけると思います。

これ自分はいつもサーバサイドで表示文字数を削って出力していましたが、
なんと、これがCSSだけで出来る方法を見つけました。(イマサラデスガネ。)

使用例:

.text {
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
}

必要なスタイルの指定としては、
テキストの表示幅を決めるために必ずwidthを指定すること
改行させないために white-space: nowrap; を指定
表示領域から溢れでた分を非表示にする overflow:hidden; を指定

そして、一番重要な text-overflow: ellipsis; の指定を追加します。
ブラウザによって指定が異なるので、
-webkit-text-overflow: ellipsis; #Webkit対応
-o-text-overflow: ellipsis; #Opera対応
を入れておきましょう。

補足:IE6から使えて、Firefoxはバージョン7から対応されているようです。

このスタイルを適用すると、

長い長い文字列を今まではPHPのsubstr()などで省略してましたよ

が、

長い長い文字列を今まではPHPのsubstr()などで省略...

のようにCSSで出来るようになります。

HTML的には省略前の文字列が表示されていて、描画時に「…」となるのでSEO的にはこちらで対応した方が良いのかな。
ただし2行や3行で改行した文字列の末尾を「…」にする場合はPHPやJavascriptで文字列を処理する必要があります。

ツールチップとかでマウスオーバーした時に、タイトル全文表示させても良いし見せ方色々。
見つけてちょっとうれしいスタイルでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>