ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

機種別ハイスコア(80点~)タイトルを見る

スマホで高画質なPCゲームをプレイ可能!

事前登録で1~2ヶ月間無料 + 半年間の料金が半額に!

HP・ブログ関連

CSSで領域からはみ出たテキストをドット「...」に置き換える方法

2019年4月9日

色々なホームページで、以下のように表示しきれないテキストの部分をドット「...」に置き換えているのをよく目にするのではないでしょうか。

1行の場合

これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。

2行以上の場合

これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。

 

このように入りきらない末尾を「...」に置き換えることで、閲覧者に続きの文があるのだと分かってもらえます。

職業ユーチューバーにオススメ!

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・カード

当サイトからの入会で
初年度の年会費0円(無料)

20歳から入手可能な一流ゴールドカード

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・ゴールド・カード

当サイトからの入会で
初年度年会費0円(無料) 3万ポイント

対象の文が1行の場合

まず対象の文をどのくらいの横幅に収めたいのかを指定するために、 文を収納している要素に対して横幅(width)を指定してください。

次にその要素に対して、以下のCSS文を適用します。

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

3行目の"overflow:ellipsis;"が省略符号を表示するプロパティとなります。

このCSSを適用することで以下のように省略符号が付きます。

これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。

ただしこのCSS文では表示される分は1行のみで、あとは省略されてしまいます。

次に、行を複数行表示させたい場合について解説します。

対象の文が2行以上の場合

複数行表示させたい場合は"-webkit-"を用います。

※webkitを使用する為、Chrome以外の特定のOSでは「...」が表示されない場合があります。

1行の場合と同様、まず文を収納している要素に対して横幅(width)を指定してください。

次にその要素に対して、以下のCSS文を適用します。

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp: 2;
overflow:hidden;
text-overflow:ellipsis;

この時、3行目の"-webkit-line-clamp"の部分で表示させたい行数を指定できます。

また、1行表示の時にはあった"white-space:nowrap;"を削除している点に注意してください。

このCSSを適用することで以下のように指定した行数が表示された後、省略符号に置き換わります。

-webkit-line-clamp: 2;

これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。

-webkit-line-clamp: 3;

これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。

これで省略符号「...」を付けることができました!限られた領域内にテキスト文を表示する際はかなり便利な機能なので、 みなさんも是非お試しください!

ゲームも仕事も快適に!

2020年7月:最も人気なゲーミングPCはこちら

スマホで高画質なPCゲームをプレイ可能!
2020年7月末までの登録
最大61日間全ユーザー無料
2020年7月末までの登録で、最大61日間全ユーザー無料

関連コンテンツ

機種別ハイスコア(80点~)タイトルを見る

機種別ハイスコア(80点~)タイトルを見る

-HP・ブログ関連
-, , , , , , , , , ,

Copyright© ゲマステ!- Gamers Station , 2020 All Rights Reserved.