Firefoxでもtext-overflowを実現するテクニック

カテゴリ:CSSテクニック 2010年6月 9日 09:39

text-overflowの実装状況

最初に、Firefox ではまだtext-overflowを実装していません。
もともとは IE の独自実装であり、現在は CSS3 で策定中の仕様となります。

ところが、Opera、webkit は先行実装しているので対応しています。
しかし、Firefox は前述したようにまだ実装されていません。
そこで、Firefox 向けにもなんとか text-overflow と同じ効果を得るテクニックの紹介です。

今回のテクニックの肝は、margin の使い方です。
とりあえず実際に動いているデモを見てください。(Firefox で見てください)

実際に動いてるサンプル

サンプルを見ると、しっかりとテキストか溢れたときだけ...が表示されているのが分かると思います。
(Firefox の【表示>ズーム>文字サイズだけ変更】のチェックを入れれば、拡大・縮小でテキストサイズだけが変更できるので、それでサイズを変更するとより分かりやすいと思います) text-overflow は他の主要なブラウザではすでに実装されているので、それらのブラウザ向けにはそのものを使い、Firefox 向けにだけ今回のテクニックを使っています。

ちなみに Firefox3.0 も対象とするものと、除外したものふたつを紹介します。
やっていることはほとんど同じですが、3.0 では実装の違いからうまく動かない部分があるので代替えとしての処理になります。

3.0 を無視するのであれば、無駄な要素が必要なく、CSS だけですべて実現可能となります。

Firefox3.0 のシェアがそれほどないことから、特に必要でなければ無視したほうが無難かもしれません。
効かなかったとしても閲覧に支障が出るわけではないからです。(効かなかったとしても、通常の overflow: hidden でテキストが切り取られるのでレイアウトは破綻しません)

では、実際にテクニックの解説です。
まずはソースを見てください。

HTML ソース

HTML はそれほど複雑ではありません。よくある形としては、様々なコンテンツを含んだ div 要素(サンプルではoverflowBox)があり、その中のどれかの要素(例えばタイトル)の文字数が未知数で、予め想定しておけない、という場合がありえると思います。
そしてそれを実現するには、その想定できない要素(つまりtext-overflowを適用させたい要素)に対してclass="overflow"を指定するのみです。
続いて CSS を見てみましょう。

CSS ソース

今回の肝はmarginだと書きました。
ざっくりとなにをしているかを説明すると、まずオーバーフローする横幅を決めます。(サンプルの場合は 180px)
そのうえで、そのブロック要素の中に、テキストの内容に応じてボックスのサイズが変わる要素を配置します。(display: inline-block) さらに、テキストがあふれない場合には...が表示されないようoverflow: hiddenを指定しておきます。

そして:after擬似要素の content に "..." を指定、それを絶対配置し、オーバーフローする横幅(180px)と同じだけの値分右にずらします。(right: -180px
そして最後に、その要素の margin-right に 100% を指定します。
この :after 擬似要素が、text-overflow のように...を表示する部分になります。

上記の内容を図にしてみました。テキストが増えても、...の位置が変わりません。
結果、テキストが溢れるくらい長くなったときにだけ「...」の部分が表示される、つまり text-overflow と同じ挙動をする、というわけです。

動作の解説

さて、ではなぜそうなるのか。

まず、margin に % を指定するとその値は親ボックスの幅(width)が基準となります。
(ちなみに、margin-top/bottom も同様に幅を基準にするので、margin はすべて幅を基準にしている、というわけです) つまり、テキストの内容に応じてボックスが拡張されることで、margin の値も変化していくのです。
そしてオーバーフローで消したいところまでボックスが伸びると、右にずらした分と margin の値が釣り合い、結果その消えていた分が顔を出す、というわけです。

このテクニックの問題点

ただこのテクニックにも問題はあり、テキストが等幅ではない場合は文字が欠けてしまう場合がある、ということと、背景に画像を使っているなど、複雑な背景の場合には使えません。
なぜなら、この文字を消す処理は、「...」を表示している要素に対して背景に色をつけ、テキストにかぶせることで消えているように見せているためです。

また、Firefox3.0 では、:after 擬似要素の position がうまく動作せず、常にテキストの最後に「...」が表示されてしまいます。
そのためサンプルでは、HTML 自身に「...」を追加し、代替案としているわけです。(サンプルで言うと .leader の部分。これはそのまま :after 擬似要素と同じことをしています)

ハックを使って Firefox だけにテクニックを指定

さらに、セレクタの部分には普段見慣れない指定があるかと思います。
これは Firefox 向けのハックです。ハックについては ヨモツネットさんの「Firefox 1.0, 1.5, 3.0, 3.5 用の CSS ハック」を参考にさせて頂きました。

そしてそれ以外にも:notなどの指定がありますが、これは IE7 対策です。
本来、セレクタのグループの中に未知のもの(サンプルではx:-moz-brokenの部分)が含まれていると、指定されているプロパティを無視するのが仕様なのですが、なぜか IE7 では無視せず、しっかりとプロパティが反映されてしまいました。

なので、実際に使いたいセレクタに、さらに:notを加えることで、それ自体も無視するようにした、というわけです。

これらの指定をすることで、text-overflow に対応しているブラウザにはそれを、Firefox だけに今回のテクニックをする、というのを実現しているわけです。

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/181