3点リーダー（...）の実装などメモ...φ(･_･

3点リーダー（...）の実装方法を学んだので、メモする記事です

-webkit-を使う方法

See the Pen Untitled by (@vtdrcdif-the-sasster) on CodePen.

display: -webkit-box;
-webkit-box-orient: vertical;  //垂直にレイアウトする
-webkit-line-clamp: 1; //1行目まで表示する、それ以降は3点リーダを表示させる
overflow: hidden; //2行目以上は隠す

-webkit-とは？

ベンダープレフィックス(Vendor Prefix)
標準化されていないCSSプロパティやJavaScript APIに使用されるもの

• プレフィックスには種類があって、-webkit-はChrome/Safari/ほとんどのiOSブラウザに対応している
• ブラウザごとに独自のCSS拡張機能が開発されていて、プレフィックスをつけることでそれらを利用できる

-webkit-を使わない方法

See the Pen Untitled by (@vtdrcdif-the-sasster) on CodePen.

overflow: hidden; //はみ出したとこは非表示
text-overflow: ellipsis; //あふれた内容が非表示になる場合、'...'で表示する
white-space: nowrap; //改行文字まとめる、テキストは折り返さない

テキストを溢れさせるには、overflow: hidden;やwhite-space: nowrapが必要

text-overflow

• text-overflow: clip;
  • コンテンツの末端でテキストを切り取る
  • 文字の途中で切り取る可能性がある
• text-overflow: ellipsis;
  • 3点リーダー
  • ...はコンテンツの領域内に表示されるため、表示されるテキストは少なくなる
  • 省略記号を表示する場所がない場合は切り取られる

white-space

コード内での半角スペースやタブ、改行（ホワイトスペース）をどう表示させるか決める
キーワード値

• white-space: nomal;
  • 連続改行や半角スペースはまとめられる
  • 折り返す
  • 文末の空白は無視
• white-space: nowrap;
  • 連続改行や半角スペースはまとめられる
  • 折り返さない
  • 文末の空白は無視
• white-space: pre;
  • 連続した半角スペース、tabはまとめられる
  • HTML内の改行がそのまま反映される
• white-space: pre-wrap;
  • 改行や半角スペースがブラウザ表示にそのまま反映
  • 折り返される
• white-space: pre-line;
  • 連続した半角スペース、tabはまとめられる
  • 改行文字かbr要素がある時折り返される
• white-space: break-spaces;
  • 連続するホワイトスペースは行末も含めて残る
  • 空白がボックスの領域の大きさに影響する

参考