溢れた文字を隠すCSS

gmailのメール一覧において、タイトルとその内容が表示されているのだが、ウィンドウサイズでちゃんと表示が隠れるのに昨日気がついた。どうしているのだろうと思ってソースを見てもJavaScriptを呼んでいることぐらいしかわからないので、ここで実験。

pre.testhidden {
    word-break: break-all;
    overflow:hidden;
    background-color: #ffccff;
}

....

<pre class="testhidden">あいうえお....</pre>

preタグに指定した文字列は実際には、

あいうえおかきくけこさしすせそたちつてと。A quick brown fox jumps over the lazy dog. Cozy lummox gives smart squid who asks for job pen.

です。で、以下が実験結果。

あいうえおかきくけこさしすせそたちつてと。A quick brown fox jumps over the lazy dog. Cozy lummox gives smart squid who asks for job pen.
うまく行くみたいですね。
#と思ったが、FirefoxではOKだけれども、IEではうまくいかず。

スタイルシートの設定ははてなでは、デザインの詳細設定から設定する必要あり。