【CSS】text-overflowで長い文章を「・・・」で省略する方法は？

css

ボックスからはみ出した文章が下に回りこむとボックス要素の高さが変わったりして嫌だなと思ってはみ出した文章に対しては・・・で表示させるようにしてみたのでメモる。

これまでは、javascriptなど文字数調べて・・・なんてめんどくさいことをしていたのをCSS3にtext-overflowというプロパティが実装されたのでそれが実現できるようになりました。

htmlとcssのコード

今回はファイルを跨ぐので、ファイルごとのコードと説明を乗っけておきます。　

htmlは下記のような感じで、box要素の中に文字列がある感じで、テーブルもtd要素の中に文字列がある。




    
既報の通り、アップルは日本のオンラインストアでのiPhone 5s / iPhone 5cのSIMフリー(アンロック)版の販売を開始した。







    
既報の通り、アップルは日本のオンラインストアでのiPhone 5s / iPhone 5cのSIMフリー(アンロック)版の販売を開始した。

cssのコードは下記のような感じ。余計な記述は省いています。



.box p{
    width: 100%; /* IE6対策 */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


table td{
   
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:200px;
    max-width:200px;
}

text-overflowによる実装方法

まずは、text-overflowのプロパティについて調べてみた

text-overflowのプロパティ

text-overflow　は領域からはみ出し領域の表示方法を指定するプロパティで、見てもらえば分かるとおもいますが、clipは「・・・」が付かなくて、ellipsisが「・・・」が付きます。

プロパティ名 値 説明
text-overflow clip 省略符号を表示しない
ellipsis 省略符号を表示する

実際の実装の解説

もちろん折り返ししたら意味がないので、white-spaceはno-wrapを指定して一行で表示させるようにします。

ボックスからはみ出した文字を表示させないようにoverflowでhiddenで隠します。

そして、はみ出した文字列の表示方法としてtext-overflowでellipsisを指定すれば「・・・」と表示されるようになります。

幅に関して

今回こちらの「text-overflow – CSS | MDN」を参考にさせていただきましたが、pタグに関してはIE6対策用で幅を100%指定されているようでした。

なので特にIE6なんて、今更対応させねーよって人は幅を指定しなくていいんじゃないでしょうか。

td 要素の場合

上記のCSSのコード見ていただくと分かると思いますが、td要素の場合はwidthとmax-widthを同じ値を指定する事で、実現できるようです。