CSS text-overflow 列幅超過時の文末(ドット３つ…)

01. text-overflow

・text-overflowとは

02. 使用例

・何もしない場合

・文章を途中で終了させる (clip)

・文末にドット３つ(...)を表示 (ellipsis)

text-overflowとは

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

text-overflow : 値

値は以下を設定します。

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

何もしない場合

<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は必須です。
無い場合、文字は横にはみ出します。

文末にドット３つ(...)を表示 (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は必須です。
無い場合、文字は横にはみ出します。