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

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
こんな方に読んでほしい
CSS
について学びたい方へ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;
}
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;
}
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;
}
コンテンツからはみ出た部分を非表示、スクロールを指定することが可能
スペース・タブ・改行の表示方法を解説!!
今回はこれで以上です。
text-overflow
とは、テキストが表示領域をはみ出した際に、「…」省略記号で表示を指定します。overflow
と、white-space
プロパティを合わせて指定します。width
+ em
で指定をしましょう。![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
2025.01.11
2024.10.05
2024.05.15
2024.05.09
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog