【CSS】text-overflow: ellipsis; 要素からはみ出した文字を省略（・・・）する

text-overflow: ellipsis;

 p{
    overflow: hidden;  /* はみ出したものを表示させない */
    white-space: nowrap;  /* 文章を改行させない */
    text-overflow: ellipsis;  /* はみ出した部分を省略し「・・・」で表示 */
  }        

はみ出した文字を「・・・」で省略して表示するには、
text-overflow: ellipsis;

同時に、
overflow: hidden;
white-space: nowrap;
を記述しないと正しく表示されない。

ロリポップ！レンタルサーバー SAMURAI ENGINEER(侍エンジニア)｜無料カウンセリング予約