CSS で指定幅を超えた文字列を切り取り「…」を付加する方法

この記事では、CSS で指定した幅を超えた HTML 要素を切り取って「…」を付加する方法を紹介する。

これができてなにが嬉しいか

動的に文字列を表示するときや、レスポンシブデザインで動的にレイアウトを調整するときなど、指定した幅以上のコンテンツを切り取る事ができたら、非常にレイアウトが楽になる。

私は、これまで PHP や JavaScript などで文字数をカウントしてこのような実装に近い物を作っていたが、半角文字と全角文字の違いや、半角文字同士の幅の違い、クロスブラウザ問題等を考慮すると現実的なものではなかった。

CSS で実装できたらなー、と調べていたら CSS3 によって追加された text-overflow 等をうまく用いる事で実装できる事が分かったので、その方法を紹介する。

実装のために CSS の以下の 3 つのプロパティを用いる。
・white-space
・overflow
・text-overflow

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

実際に適用したものを以下に記述する。

この p 要素は 200px で切り取られ、「…」が付加されます。

この実装の解説は以下で行う。

white-space は空白文字の扱いを定義するプロパティである。nowrap を指定する事で、改行を半角スペースとして表示させる。これにより、文字列を 1 行におさめる。

overflow は要素からはみ出したコンテンツに対する指定をするプロパティである。hidden とする事で、はみ出し部分を切り取っている（＝表示しないようにしている）。

text-overflow ははみ出し領域の表示方法を指定するプロパティである。ellipsis とする事で、はみ出した際に末尾に「…」が付加される。

以上の CSS 指定により上記の実装が可能になる。

table の td 要素や span 要素など、上記の指定だけでは切り取りができない場合がある。

td 要素では、width に加えて max-width に width と同じ値を指定する事で、実現する。
span 要素などのインライン要素には、display プロパティに block を指定する事で実現する。

その他補足として、切り取りを指定した要素に title 属性で同様の文字列を挿入すると、マウスホバーでツールチップが動作するので適宜設定すると良いだろう。

以上。