▲TOPへ戻る

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

ellipsis
文字がはみ出してしまっては、カッコ悪いですね。
要素に収まらず、はみ出してしまった文字を「・・・」で省略させる方法を紹介します。

text-overflow: ellipsis;

CSS
 p{
    overflow: hidden;  /* はみ出したものを表示させない */
    white-space: nowrap;  /* 文章を改行させない */
    text-overflow: ellipsis;  /* はみ出した部分を省略し「・・・」で表示 */
  }        
text-overflow: ellipsis;だけを記述しても「・・・」は表示されません。
overflow: hidden; white-space: nowrap; の二つを忘れないようにしましょう。
point

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

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

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<