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

シュウ

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

こんな方に読んでほしい

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

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

Chrome	Safari	Firefox	IE	Edge

[記事の内容]

text-overflowについて

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

また、text-overflowでテキストを省略する際には、overflow、white-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プロパティ参考になるかも