CSS text-overflow 列幅を超えた時の文末の表示方法

text-overflowプロパティ

text-overflow : 値

text-overflowプロパティは、テーブルの列幅を超えた時の文末の表示方法を指定します。

説明
clip 文章は途中で終了します。テーブルの列幅をはみ出しません。
clipは、切るという意味です。
ellipsis 文末にドット3つ(...)が表示されます。テーブルの列幅をはみ出しません。
ellipsisは、省略記号という意味です。
値を継承しない

以下は、MDNのtext-overflowのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow

テーブルの列幅を超えた時の文末の表示方法のサンプルです。

<style>
#p1 {
    width: 80px;
    border: 1px solid;
}
#p2 {
    width: 80px;
    border: 1px solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
#p3{
    width: 80px;
    border: 1px solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
<p id="p1">123456789</p>
<p id="p2">123456789</p>
<p id="p3">123456789</p>

2~5行目は、text-overflowを使用しないサンプルです。
11行目は、text-overflowにclipを指定しています。この場合9行目のwhite-space: nowrapとoverflow: hiddenは必須です。
18行目は、text-overflowにellipsisを指定しています。この場合9行目のwhite-space: nowrapとoverflow: hiddenは必須です。

以下は、実行イメージです。

1つめは、何もしていません。
2つめは、text-overflowにclipを指定しています。文字は、はみでていません。
3つめは、text-overflowにellipsisを指定したので文末はドット3つ(...)になっています。

関連の記事

CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow 表示幅超える/スクロール表示非表示
CSS word-break 単語の改行方法を指定
CSS white-space ホワイトスペースの表示を指定

△上に戻る