GB : ++Graphnine Blog++

2006年10月24日

CSSだけで文字を省略する方法

久しぶりのブログ更新です。
最近は買った物を紹介してばかりでしたが、今日はまじめにCSSのお話。

先日、某SNSで見つけたネタなんですが、
見つけた時はCSSっておもしろいなぁ！と改めて思い知らされました。

で、見つけたネタなんですが、ボックス内に長ーい文字が入った時に、
文字（文章）をCSSのみで省略させるというもの。
よく、文末に「...」を付けて省略しますが、アレをCSSだけで表現しよう！！
という事です。

JavaScriptとかPHPとかPerlなどのプログラム言語で表現するが
当たり前なんですが、これをCSSだけでできるとは思いませんでした。

んで、その方法なんですが、以下のとおりです。

<p><span>hogehogehogehoge</span></p>

みたいなHTMLがあった時に、CSSで

p:after {
	content: "...";
}

span { 

	text-overflow: ellipsis;

	width: 100px;

	overflow: hidden; 

	float: left;

}

と書けばOKだそうです。
:afterはCSS2で追加された疑似要素というもので、
サンプルのCSSではPタグの後ろ（after）にcontentの内容「...」を付け足します。

ただ、この:after擬似要素はWindowsのIEでは未実装なので、無視されます。
FireFoxはOKみたいです。
でも、WinのIEを使ってる人が多いので、正直これだけじゃ意味ないんですね。
そこで生きてくるのが、spanタグに設定した「text-overflow: ellipsis;」。
これはIE6以降に実装されている、テキストがオーバーフローした時に「...」で省略するというスタイル。

という事で、うまくFireFoxとIEの実装の違いを使い表現しているといったものです。
凄いですね。素晴らしいですね。

未実装なCSSは基本的にシカトしてきましたが、
上手く利用すればこういった技が使えるという事です。

ちゃんとCSSの仕様に目通して見るかーと思いました。

サンプルページ

※Operaでも動作確認できました。
※<span>の中の文字列は半角英数かつ連続した文字列である必要があるっぽいです。

...元に戻す

投稿者 shiro : 01:50 | カテゴリー：Web | コメント (0) | トラックバック (0)