| 属性名 | text-overflow |
|---|---|
| 値 | clip | ellipsis | <string> |
| 初期値 | clip |
| 適用可能要素 | ブロックコンテナ |
| 継承 | 継承しない |
| メディア | Visual |
| サポート | C3 / e6 / Fx7 / Ch1 / Op11 / Sa1.3 |
overflow: hidden で領域からあふれた文字を非表示にする際に、非表示にしたことを示す文字列を指定します。
| 値 | 説明 |
|---|---|
| clip | 何も表示しません。 |
| ellipsis | 省略記号 '…'(U+2026) を表示します。 |
| <string> | 指定した文字列を表示します。Firefox でのみサポートされています。 |
<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>