Hatena::ブログ(Diary)

webのべんきょうは実践。

2016年05月01日

複数行の末尾を「…」で省略する方法

CSSでかく場合

参考サイト

CSSで複数行の末尾を「…」で省略する方法 | memobits

  • 1行の場合は
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
  • 複数行の場合
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

javascriptでかく場合

参考サイト

Line Clampin' (Truncating Multiple Line Text) | CSS-Tricks