株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

CSSで表示領域で表示しきれない文字を省略表示できるtext-overflow

2017.4.14(Fri) 18:43 | CSS | sofuku

表示領域からはみ出してしまう文字を省略表示したい、という場合の小ネタです。

横幅が足りずに文字がはみ出してしまう場合、「あいうえおかきくけこさし…」のように省略表示をするにはCSSのみで実現可能です。

使用するのはtext-overflowプロパティ。

元々はIEの独自仕様だったものが、CSS3で採用されたようです。

 

text-overflowプロパティを使用するには以下の指定が必要になります。

・widthが指定されていること(px、em、%指定可能)

・overflowプロパティがvisible以外であること

・white-spaceプロパティがnowrapであること

 

例としては、CSSを以下のように設定します。

p.text-overflow{
    width:200px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

サンプル

内容が長いと省略表示されます。内容が長いと省略表示されます。内容が長いと省略表示されます。内容が長いと省略表示されます。

 

注意点として、white-spaceプロパティでnowrapを指定するので1行表示の場合でしか使えません。

またテーブル要素のTDにはそのままだと効かないみたいです。

その場合はTDの親であるテーブル要素にtable-layout: fixed;を指定するか、tableのcell要素であるTDに対してmax-widthを指定すると省略表示してくれます。