閉じる

テキストの文字数制限をCSSで行う

テキストの文字数制限(文字数を超えた場合の…表示)は、以前までphpなどで行う必要がありましたが、
現在は簡単にCSSで設定する事ができます。

CSSの文字数制限

設定するのは下記です。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;


width:の設定です。

設定例

「あああああ~」テキストに250PXの幅で文字数制限を設定します。

あああああああああああああああああああああああああああ

#sample1 {
width:250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
あああああああああああああああああああああああああああ

幅250PXで…表示になりました。

複数行の文字数省力はCSSでは難しい

複数行の文字数制限は、現時点は難しいです。

GOOGLE Chromeとsafariのみの限定は可能です。
対応する場合は、下記の設定で行えます。

#sample2{
text-overflow: ellipsis;
overflow : hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
見えなくするだけなら、
height
overflow : hidden;
で設定が可能です。

ピックアップ記事

  1. 先日、Windows11の機能や無償アップグレードなどがMicrosoftから発表されました。…
  2. 2021年WEB制作やネットショップで利用できる補助金について2021年の補助金の公募が開始…
  3. Google Search Console(サーチコンソール)で、「パンくずリスト「WebサイトUR…
ページ上部へ戻る