RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.21 ~ No.30 > 記事No.28

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

← 前の記事

次の記事 →

oveflow_ellipsis

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

1行の場合

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

2行以上の場合

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

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


対象の文が1行の場合

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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


-webkit-line-clamp: 2;

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

-webkit-line-clamp: 3;

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

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


関連記事はこちら


  ■ 一言コメントをどうぞ!(100字まで)


過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ