ハック
2014.08.21
2,038
CSS

CSSで指定した長さ以上のテキストを「…」で省略する

CSS

<style>
.textWrap{
    width: 125px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
</style>

HTML

<div class="textWrap">昔々あるところにおじいさんとおばあさんがいました。</div>

ポイント

幅を指定しない場合は画面幅が採用され、画面幅以上の文字が…で省略されます。
リンクに利用する場合でリンク色を変更している場合は、aタグの親タグにも色の指定が必要です。

ex.HTML

<div class="textWrap" style="color:red;"><a href="#">昔々あるところにおじいさんとおばあさんがいました。</a></div>