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

harada 252views 更新:2014年8月21日

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>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません