実際に動いてるサンプル

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

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

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

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

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

HTML ソース

<div id="overflowSample"> <h2>Firefox3.0以降</h2> <p class="ttl">Sample1</p> <div class="overflowBox sample1"> <span class="overflow">1行が短い場合<span class="leader">...</span></span> </div> <div class="overflowBox sample1"> <span class="overflow">溢れる場合。溢れる場合。溢れる場合。溢れる場合。<span class="leader">...</span></span> </div> <h2>Firefox3.5以降</h2> <p>:after 擬似クラスを使い、HTML を汚さない実装</p> <p class="ttl">Sample2</p> <div class="overflowBox sample2"> <span class="overflow">1行が短い場合</span> </div> <div class="overflowBox sample2"> <span class="overflow">溢れる場合。溢れる場合。溢れる場合。溢れる場合。</span> </div> <!-- /#overflowSample --></div>

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

CSS ソース

.overflowBox { width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; } .overflow:not(div) , x:-moz-broken { position: relative; display: inline-block; overflow: hidden; } .overflow:not(div) .leader , x:-moz-broken { display: inline; background: white; position: absolute; right: -180px; margin-right: 100%; } .leader { /* exclude not firefox */ display: none; } .sample2 .overflow:not(div):after , .overflow:last-of-type>div , x:-moz-broken { content: "..."; display: inline; background: white; position: absolute; right: -180px; margin-right: 100%; }

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

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

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

このテクニックの問題点

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

また、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 だけに今回のテクニックをする、というのを実現しているわけです。