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

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

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

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

▼基本

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

 

▼例:以下のようなことがでけました。

text-overflow:ellipsis

 

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

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

制作対応できるのは

202311月〜

ご相談はいつでもOK!

東京ブランド「ロゴ」