閉じる

テキストの文字数制限を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. ahrefs
    SEOツール 「ahrefs(エイチレフス)」とは?ahrefs(エイチレフス)は、日本でも有名…
  2. reCAPTCHA
    ホームページを公開すると設置したメールフォームに海外からスパム投稿され大量の迷惑メールが届くことがあ…
  3. ビデオ会議で便利なのがWeb会議サービスです。無料で利用できるサービスもいくつかあります。「Skyp…
ページ上部へ戻る