2016.02.29 　 2021.10.10

CSS｜テキストが表示領域を超えている時に途中でテキストを切って「・・・」を表示させる方法

KOSAERU WEB MEMO CSS

省略可能なテキストを省略して「・・・」を表示させます。
デザイン的に整列して表示させたい時なんかに便利

p {
white-space: nowrap;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

p {

white-space: nowrap;

width: 100%;

overflow: hidden;

-o-text-overflow: ellipsis;

text-overflow: ellipsis;

}

ちなみにWordPressでしたら↓↓の方法もありますです。

WordPress 記事タイトルの文字数制限

記事タイトルとURLをコピーする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。