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>
表示
あいうえおかきくけこさしすせそたちつてとなにぬねの
あいうえおかきくけこさしすせそたちつてとなにぬねの
あいうえおかきくけこさしすせそたちつてとなにぬねの
リンク
- https://www.w3.org/TR/css-ui-3/#text-overflow
- https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
- https://caniuse.com/#search=text-overflow
Copyright (C) 2019 杜甫々
初版:2019年12月30日、最終更新:2019年12月30日
https://www.tohoho-web.com/css/prop/text-overflow.htm