WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

はみ出した文字をCSSで文末を「…」にして省略

1行のみ

p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

複数行

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

display: -webkit-box;
レキシブル ボックス モデルになる

-webkit-box-orient: vertical;
ボックス内の子要素は、上から下へ垂直に積み重ねて表示する

-webkit-line-clamp
フレキシブルボックス内の子要素の配置方向を指定する

IE 未対応
Firefox 未対応
Opera Mini 未対応

Can I use... Support tables for HTML5, CSS3, etc