hamayuzinの日記

ITベンチャーに新卒入社し、エンジニアとかデータサイエンティスト、とかやってます。あの時 あれやってたな的な備忘録にできれば。

【0からやり直すフロント/html/css】表示領域からはみ出したら3点リーダにするtext-overflow設定

よくある文章長過ぎるから折り返し、又は 3点リーダ...みたいにしたいやつ

今回は、3点リーダ

text-overflow: ellipsis;

だいたい

p {
  overflow: hidden; /* スクロール防止 */
  text-overflow: ellipsis; /*  見えなくなる手前で... にする*/
  white-space: nowrap; /* 折り返し防止 */
}

とやるとよい