SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2021.07.13
  • CATEGORY
TITLE

【CSS】text-overflowの使い方、テキストの省略表示を示す!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】text-overflowの使い方、テキストの省略表示を示す!!
の解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • CSSについて学びたい方へ
  • 今回はtext-overflow(表示意外は省略)について解説しております。

text-overflowとは、テキストが表示領域をはみ出した際に、「…」省略記号で表示を指定します。
テキストの表示領域のスペースがあまり大きくない場合に使用すると便利です。

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

text-overflowについて

text-overflowについて

text-overflowとは、テキストが表示領域をはみ出した際に、「…」省略記号で表示を指定します。

また、text-overflowでテキストを省略する際には、overflowwhite-spaceプロパティを合わせて指定します。
書き方は以下のようになります。

通常のテキスト

私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?

text-overflowを指定

私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?

<p>私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?</p>
/*--CSS--*/
p {
	width: 400px; /*--表示領域を指定--*/
	text-overflow: ellipsis; /*--省略記号を表示する--*/
	overflow: hidden; /*--表示領域を意外を非表示にする--*/
	white-space: nowrap; /*--テキストの改行を調整する--*/
	border: solid 1px #ccc;
	padding: 1em;
}
指定できる値
  • clip
    表示領域からはみ出たテキストを切り取る際に指定します。
  • ellipsis
    表示領域からはみ出たテキストを切り取り、省略記号を表示する際に指定します。
  • 任意の文字
    任意の文字を省略記号として表示します。
    ※ブラウザの対応状況によって表示します、Fifefoxは対応しております。

clipの指定について

text-overflow: clipとは、表示領域からはみ出たテキストを切り取る際に指定します。
ellipsisとの違いは、省略記号を表示するか、しないかの違いだけになります。

clipを指定

私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?

<p>私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?</p>
/*--CSS--*/
p {
	width: 400px; /*--表示領域を指定--*/
	text-overflow: clip; /*--はみ出たテキストを切り取る--*/
	overflow: hidden; /*--表示領域を意外を非表示にする--*/
	white-space: nowrap; /*--テキストの改行を調整する--*/
	border: solid 1px #ccc;
	padding: 1em;
}

ellipsisの指定について

text-overflow: ellipsisとは、表示領域からはみ出たテキストを切り取り、省略記号を表示する際に指定します。
clipとの違いは、省略記号を表示するか、しないかの違いだけになります。

また、width: 30emと指定すると、30文字目から省略記号が表示されます。
〇〇文字目から省略記号を表示させたい場合は、width + emで指定をしましょう。

ellipsisを指定

私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?

<p>私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?</p>
/*--CSS--*/
p {
	width: 30em; /*--表示領域を指定--*/
	text-overflow: ellipsis; /*--省略記号を表示する--*/
	overflow: hidden; /*--表示領域を意外を非表示にする--*/
	white-space: nowrap; /*--テキストの改行を調整する--*/
	border: solid 1px #ccc;
	padding: 1em;
}

任意の文字について

任意の文字については、ブラウザの対応状況によって表示します、Fifefoxは対応しております。
任意の文字は、切り取る直前に文字列を表示させます。

任意の文字を指定

任意の文字を指定

<p>私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?</p>
/*--CSS--*/
p {
	width: 30em; /*--表示領域を指定--*/
	text-overflow: "任意の文字"; /*--省略記号を表示する--*/
	overflow: hidden; /*--表示領域を意外を非表示にする--*/
	white-space: nowrap; /*--テキストの改行を調整する--*/
	border: solid 1px #ccc;
	padding: 1em;
}

関連記事

CSSプロパティ参考になるかも

コンテンツからはみ出た部分を非表示、スクロールを指定することが可能

スペース・タブ・改行の表示方法を解説!!

まとめ

今回はこれで以上です。

POINT
  • text-overflowとは、テキストが表示領域をはみ出した際に、「…」省略記号で表示を指定します。
  • overflowと、white-spaceプロパティを合わせて指定します。
  • 〇〇文字目から省略記号を表示させたい場合は、width + emで指定をしましょう。
  • 任意の文字について、ブラウザの対応状況によって表示します、Fifefoxは対応しております。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top