h2ospace

[CSS3] はみ出た文字列を省略できる「text-overflow」が超便利

2010-05-02 02:11:59

よく、長いタイトルを省略するときに、次のように途中で「…」とする処理があります。

長いタイトルを途中で切っ…

このような処理は通常、PHPなどのプログラム言語で処理をするのですが、CSS3には「text-overflow」というプロパティが準備されており、これが非常に便利です。次のように「overflow」プロパティと一緒に使います。

overflow: hidden;
text-overflow: ellipsis;

こうすると、指定された幅を超えるような文字は、ブラウザが勝手に「…」として省略されていることを示してくれます。

CSS3なので、まだまだ実用で使うに早いですが、これが現時点で最も活躍できるのは、iPhoneなどのスマートフォンです。iPhoneなどは、画面を縦にも横にもして使うことができます。この時、Webサイトの横幅も変化します。

そのため、1行で何文字表示出来るのかを調べるのは非常に手間がかかり、プログラム言語で行うのは困難です。非常に実用的なテクニックですね。CSS3には、まだまだ隠れた便利な機能がありそうです。

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ