CODING

[CSS] 3点リーダーの作り方

投稿日:


どうも、べ〜やんです。

今回は、3点リーダーの作り方を紹介します。





3点リーダーとは


3点リーダーって知ってますか?

文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで省略してますよ〜っと表示するあれです。

名前は知らなくても見たことはあると思います。


作り方


3点リーダーはCSSで表示することができます。

画面の大きさが変わっても対応できる設定なので楽です。

一行


.content1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

まずは一行の場合を簡単に説明すると以下の通りです。

overflow: hidden;ではみ出す部分を隠す。

text-overflow: ellipsis;ではみ出た部分に省略記号を使うと指定。

white-space: nowrap;で自動で折り返すのを防ぐ。


複数行


次に複数行の場合は以下の通りです。

※2019/11「IE」以外

.content2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

overflow: hidden;ではみ出す部分を隠す。

display: -webkit-box;でフレキシブルボックスにして折り返し方法を指定できるようにします。

-webkit-box-orient: vertical;でフレキシブルボックスの並びを縦に。

-webkit-line-clamp: 3;で3行に指定。


See the Pen PooEpPY by beeyan (@orientado) on CodePen.


おわりに


今回は、3点リーダーの作り方を紹介しました。

※2019年11月現在「IE」では対応していない部分もあるので注意してください。



-CODING
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

[CSS] CSSでチェックマークを作る方法

どうも、べ〜やんです。 今回はCSSでチェックマークを作る方法を初心者の方用に紹介します。 リストなどのデザインのバリエーションを増やすのに便利です。 チェックマーク リストなどによく使われるチェック …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …