CSS - text-overflow

概要

属性名 text-overflow
値 clip | ellipsis | <string>
初期値clip
適用可能要素ブロックコンテナ
継承継承しない
メディアVisual
サポートC3 / e6 / Fx7 / Ch1 / Op11 / Sa1.3

説明

overflow: hidden で領域からあふれた文字を非表示にする際に、非表示にしたことを示す文字列を指定します。

値説明
clip何も表示しません。
ellipsis省略記号 '…'(U+2026) を表示します。
<string>指定した文字列を表示します。Firefox でのみサポートされています。

使用例

HTML
<style>
.text-box {
  width: 15rem;
  border: 1px solid #ccc;
  margin-bottom: .5rem;
  white-space: nowrap;
  overflow: hidden;
}
.clip {
  text-overflow: clip;
}
.ellipsis {
  text-overflow: ellipsis;
}
.string {
  text-overflow: "...";
}
</style>

<div class="text-box clip">
  あいうえおかきくけこさしすせそたちつてとなにぬねの
</div>

<div class="text-box ellipsis">
  あいうえおかきくけこさしすせそたちつてとなにぬねの
</div>

<div class="text-box string">
  あいうえおかきくけこさしすせそたちつてとなにぬねの
</div>
表示
あいうえおかきくけこさしすせそたちつてとなにぬねの
あいうえおかきくけこさしすせそたちつてとなにぬねの
あいうえおかきくけこさしすせそたちつてとなにぬねの

リンク

Copyright (C) 2019 杜甫々
初版：2019年12月30日、最終更新：2019年12月30日
https://www.tohoho-web.com/css/prop/text-overflow.htm