Webシステム開発はお任せください

↑Topへ

開発ブログ

3点リーダーの実装(2018/03/14)

三点リーダーのことをクランプと呼ぶらしい

 

通常の

table.grid td.overflow {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

方式は1行対応だが以下のサイトの方法だと

複数行対応できるらしい
 

https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/

因みにchrome,safariだけなら
 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
overflow: hidden;
  }

で対応可能。