Firefox7がリリースされました。
3から4のリリース期間はなんだったの？っていうくらいのスピードです。
Firefox7では遂にtext-overflowを対応してくれました。
でもtext-overflowはこれまでFirefoxが未対応だったので、
なかなか使う機会も少なく、存在を知らなかった方も多いのではと思います。
記事の抜粋文などで特定の幅を持った部分から文字がはみ出してしまった時に『...』やその幅で後ろの文を省略してくれるCSSプロパティです。text-overflowとは
<h2>試しに使ってみましょう。</h2>
<div class="over">省略できるものならばやってみるがいい!!うぉおおおおおお<br />
なんだと!?省略されているだと!?そんな馬鹿な！！！</div>
<p>こんな感じになります。<br />
『!!!?』自分で後ろに『...』ってつけてるだけじゃないの??<br />
と、声を出してしまった方のために上記のコードを載せてみます。</p>
HTML
<div class="over">
省略できるものならばやってみるがいい!!うぉおおおおおお☆<br />
なんだと!?省略されているだと!?そんな馬鹿な！！！☆
</div>
<p>最後の☆まで表示されていないことがわかります。<br />
では、CSSも見てみましょう。<br />
</p>
.over{
white-space: nowrap;
width: 300px;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background-color:black;
padding:10px;
color:white;
margin:10px 0;
}
自動改行を防止するためにwhite-spaceをnowrapにしてあります。
text-overflowを利用する際にはoverflowをhiddenにしておかないと有効にならないということも気を付けなければいけません。
text-overflowには指定できる値が『ellipsis、clip』と2つあります。
ellipsisは上記のように省略する文を『…』で、
clipはその幅を超えた部分を切り落とすという指定です。
実はIEは6からこのプロパティに対応しているので使えるんです。 (上記のコードにあるように、Opera9〜10はベンダープレフィックスを付けなければいけませんが....)でも奥さん‥IE6は…
<p>これまでもwhite-space、overflowの組み合わせではみ出した文字を省略させることはできましたが、
やっぱり『…』と省略されているのが目視できたほうがユーザにとっては理解しやすいですよね。</p>
参考url：text-overflow - MDN
text-overflowによる文字の省略をした文字もGoogleの検索結果にはちゃんと反映されていて、ハイライト表示されていました。追記 2011/10/1
