目次 | text-overflowとは |
何もしない場合 | |
文章を途中で終了させる (clip) | |
文末にドット3つ(...)を表示 (ellipsis) |
text-overflowとは
text-overflowは、テーブルの列幅を超えた時の文末の表示方法を指定します。
書き方 | text-overflow : 値 |
値 | clip 文章は途中で終了します。テーブルの列幅をはみ出しません。 clipは、切るという意味です。 |
ellipsis 文末にドット3つ(...)が表示されます。テーブルの列幅をはみ出しません。 ellipsisは、省略記号という意味です。 |
|
比較用:何もなし | |
初期値 | clip |
継承 | なし |
参考(MDN) | https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow |
何もしない場合
<style>
.p1 {
width: 80px;
border: 1px solid;
}
</style>
<p class="p1">123456789</p>
1つめは、何もしていません。文章は横にはみ出します。
文章を途中で終了させる (clip)
<style>
.p1 {
width: 80px;
border: 1px solid;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</style>
<p class="p1">123456789</p>
7行目は、text-overflowにclipを指定しています。文章は途中で終了しています。
この場合5,6行目のwhite-space: nowrapとoverflow: hiddenは必須です。
無い場合、文字は横にはみ出します。
文末にドット3つ(...)を表示 (ellipsis)
<style>
.p1 {
width: 80px;
border: 1px solid;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<p class="p1">123456789</p>
7行目は、text-overflowにellipsisを指定しています。文末はドット3つ(...)になっています。
この場合5,6行目のwhite-space: nowrapとoverflow: hiddenは必須です。
無い場合、文字は横にはみ出します。
関連の記事
CSS overflow-wrap 単語が表示領域を超えた時の改行
CSS overflow はみ出し部分を表示する/しない
CSS word-break 単語の改行方法を指定
CSS white-space 改行するしない/空白まとめる