ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ

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

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

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

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;

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

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

この記事をシェアする

関連コンテンツ

Amazon売上ランキング(毎時更新)
  • ニンテンドースイッチ
  • PS4
  • PS5
  • XSX|S
  • PCゲーム関連
  1. ゲーム機本体
    発売日 : 2019年08月30日
    価格 : ¥32,970
    最安値 : ¥28,025
  2. ゲームソフト
    発売日 : 2019年10月18日
    価格 : ¥7,573
    最安値 : ¥6,300
  3. ゲーム機本体
    発売日 : 2019年08月30日
    価格 : ¥32,978
    最安値 : ¥29,350
  4. ゲームソフト
    発売日 : 2021年07月16日
    価格 : ¥5,580
    最安値 : ¥4,690
  5. コントローラー
    発売日 : 2017年03月03日
    価格 : ¥6,645
    最安値 : ¥6,645
  6. ゲームソフト
    発売日 : 2021年07月15日
    価格 : ¥5,682
    最安値 : ¥5,300
  7. ゲームソフト
    発売日 : 2018年12月07日
    価格 : ¥6,609
    最安値 : ¥5,580
  8. ゲームソフト
    発売日 : 2017年04月28日
    価格 : ¥5,553
    最安値 : ¥4,780
  9. ゲームソフト
    発売日 : 2018年06月21日
    価格 : ¥3,273
    最安値 : ¥2,850
  10. ゲームソフト
    発売日 : 2020年11月19日
    価格 : ¥5,564
    最安値 : ¥5,210
  1. ゲームソフト
    発売日 : 2021年10月28日
    価格 : ¥4,318
    最安値 : ¥4,318
  2. ヘッドセット
    発売日 : 2017年07月20日
    価格 : ¥6,670
    最安値 : ¥6,670
  3. ゲーム機本体
    発売日 : 2018年07月01日
    価格 : ¥39,900
    最安値 : ¥36,000
  4. ゲームソフト
    発売日 : 2021年08月02日
    価格 : ¥10,000
    最安値 : ¥10,000
  5. ゲームソフト
    発売日 : 2021年10月28日
    価格 : ¥9,460
    最安値 : ¥9,460
  6. ゲームソフト
    発売日 : 2020年11月09日
    価格 : ¥10,000
    最安値 : ¥10,000
  7. ゲームソフト
    発売日 : 2021年09月09日
    価格 : ¥7,182
    最安値 : ¥7,182
  8. コントローラー(ハンドル・ジョイスティック)
    発売日 : 2017年02月23日
    価格 : ¥4,500
    最安値 : ¥8,900
  9. プレイステーション4
    発売日 : 1970年01月01日
    価格 : ¥2,100
    最安値 : ¥2,100
  10. アクセサリーキット
    発売日 : 1970年01月01日
    価格 : ¥2,150
    最安値 : ¥1,948
  1. ヘッドセット
    発売日 : 2017年07月20日
    価格 : ¥6,670
    最安値 : ¥6,670
  2. ゲームソフト
    発売日 : 2020年11月09日
    価格 : ¥10,000
    最安値 : ¥10,000
  3. コントローラー(ハンドル・ジョイスティック)
    発売日 : 2021年06月10日
    価格 : ¥7,139
    最安値 : ¥6,068
  4. ゲーム機本体
    発売日 : 2021年07月20日
    価格 :
    最安値 :
  5. アクセサリーキット
    発売日 : 1970年01月01日
    価格 : ¥2,150
    最安値 : ¥1,948
  6. ヘッドセット
    発売日 : 2020年08月18日
    価格 : ¥10,980
    最安値 : ¥10,980
  7. ゲームソフト
    発売日 : 2020年11月09日
    価格 : ¥1,100
    最安値 : ¥1,100
  8. ゲームソフト
    発売日 : 2020年11月09日
    価格 : ¥5,000
    最安値 : ¥5,000
  9. ヘッドセット
    発売日 : 2020年09月17日
    価格 : ¥15,650
    最安値 : ¥15,650
  10. ヘッドセット
    発売日 : 2019年08月29日
    価格 : ¥10,900
    最安値 : ¥13,750
  1. 周辺機器・アクセサリ
    発売日 : 2021年09月14日
    価格 : ¥12,000
    最安値 : ¥12,000
  2. 周辺機器・アクセサリ
    発売日 : 2020年11月10日
    価格 : ¥6,241
    最安値 : ¥6,241
  3. 周辺機器・アクセサリ
    発売日 : 2020年11月10日
    価格 : ¥5,998
    最安値 : ¥5,320
  4. 周辺機器・アクセサリ
    発売日 : 2020年11月10日
    価格 : ¥4,745
    最安値 : ¥4,745
  5. 周辺機器・アクセサリ
    発売日 : 2020年12月24日
    価格 : ¥36,448
    最安値 : ¥36,448
  6. 周辺機器・アクセサリ
    発売日 : 2021年02月23日
    価格 : ¥6,473
    最安値 : ¥6,680
  7. バッテリー・充電器
    発売日 : 1970年01月01日
    価格 : ¥2,899
    最安値 : ¥2,899
  8. ゲームソフト
    発売日 : 2021年07月27日
    価格 : ¥6,208
    最安値 : ¥6,208
  9. 周辺機器・アクセサリ
    発売日 : 2021年03月16日
    価格 : ¥20,800
    最安値 : ¥19,500
  10. 周辺機器・アクセサリ
    発売日 : 2021年05月11日
    価格 : ¥7,128
    最安値 : ¥7,128
  1. ゲーミングマウス
    発売日 : 2019年06月27日
    価格 : ¥7,900
    最安値 : ¥7,800
  2. ゲーミングマウス
    発売日 : 2020年08月07日
    価格 : ¥10,287
    最安値 : ¥10,287
  3. PCゲーム
    発売日 : 2018年11月26日
    価格 : ¥2,862
    最安値 : ¥2,862
  4. ゲーミングマウス
    発売日 : 2021年02月25日
    価格 : ¥16,082
    最安値 : ¥15,920
  5. ゲーミングキーボード
    発売日 : 2019年11月14日
    価格 : ¥12,204
    最安値 : ¥9,500
  6. ゲーミングマウス
    発売日 : 2020年12月22日
    価格 : ¥16,082
    最安値 : ¥16,000
  7. ゲーミングマウス
    発売日 : 2019年03月26日
    価格 : ¥3,800
    最安値 : ¥3,800
  8. PCゲーム
    発売日 : 2019年07月02日
    価格 : ¥2,552
    最安値 : ¥2,552
  9. ゲームパッド
    発売日 : 2013年04月19日
    価格 : ¥1,892
    最安値 : ¥1,290
  10. ゲーミングマウスパッド
    発売日 : 2016年04月01日
    価格 : ¥2,800
    最安値 : ¥2,800

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

Copyright© ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ , 2021 All Rights Reserved Powered by AFFINGER5.