テキストが指定した幅を超えた場合、はみ出す分をカットして"..."を追加するには

css

某SNSのコミュニティからのネタ。例えば以下のようなリンク付きのリストがあったとする。

この場合、3番目以外のテキストがやたら長いので、指定した幅からはみ出したテキストはカットしたい、ってこともあるでしょう。そんな場合はこんな感じにマークアップするといいっぽい。

CSS

ul.test li:after {
content: "..." ;
}
 
ul.test li a {
text-overflow: ellipsis ;
width: 200px ;
overflow: hidden ;
float: left ;
white-space: nowrap ;
}

HTML

<ul class="test">
 <li><a href="#">あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</a></li>
 <li><a href="#">あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</a></li>
 <li><a href="#">あいうえおかきくけ</a></li>
 <li><a href="#">あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</a></li>
 <li><a href="#">あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</a></li>
</ul>

サンプルページで実際の表示を確認する

一応IE6とFirefox1.5で動作しますが残念なのはIE。リストのマーカーがテキストの右側に回り込んじゃってます。リストのマーカーをなしにするか、li要素じゃなくてp要素を使うとかしないとダメぽ。あとはみ出したテキストは"overflow: hidden"で非表示にしてるんだけど、マウスで選択すると非表示の部分も見えちゃったり。

それからFirefoxの場合は長くないテキストにも「...」が付いちゃったりという問題も。