Css - あふれた文字を「...」に変換する

下記のように、divの中に、長い文字列があるが、divの幅を固定したい場合、下記のようなcss設定によってあふれた文字を「…」に変換することができる。これによって、div幅を固定しながら文字列が続くことも表現できる為、スマートである。

divの例

<div id=&quot;afuretamoji&quot;>ああああああああいいいいいいううううううううえええええええおおおおおおおお</div>

css設定例

div#afuretamoji{
 font-size:10px;
 color: #06c;
 background-color: #def;
 border:1px solid #589;
 width:100px;
 max-width:100px;
 height:70px;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}

「max-width:100px;」でdivの最大幅を決めている。
「overflow:hidden;」で、あふれた文字を表示しないようにしている。
「white-space:nowrap;」で、複数行表示を禁止している。
「text-overflow:ellipsis;」で、あふれた場合に、「…」を表示するようにしている。

結果

ああああああああいいいいいいううううううううえええええええおおおおおおおお