text-overflow

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

SVG の text-overflow 属性は、テキストが行ボックスからオーバーフローした場合に、テキストコンテンツを持つブロック要素がどのように描画されるかを指定します。これは、例えば、white-space 属性や CSS の white-space プロパティの値が nowrap に設定されている場合などに発生します。このプロパティは、事前書式化されたテキストやパス上に配置されたテキストには適用されません。

SVG では、text-overflow は、テキストコンテンツブロック要素の overflow プロパティの計算値にかかわらず、有効に指定された折り返し領域が存在する場合に効果を発揮します。この効果は純粋に視覚的なものであり、切り取られたテキストは DOM から除去されず、省略記号が存在する場合でも、それ自体は DOM の一部にはなりません。すべての DOM メソッドにおいて、あたかも text-overflow が適用されていないかのように、また、折り返し領域がテキストを制約していないかのように扱われます。

メモ: プレゼンテーション属性であるため、 text-overflow には対応する CSS プロパティ text-overflow もあります。両方が指定された場合、 CSS プロパティが優先されます。

使用上のメモ

値	`clip` \| `ellipses`
デフォルト値	`clip`
アニメーション	不可

clip: 折り返し領域であふれたテキストはクリップされます。文字が部分的にしか表示されない場合があります。これがデフォルト値です。
ellipsis: レンダリング対象のテキストが折り返し領域でオーバーフローした場合、テキストは切り詰められ、指定された領域内に収まるように省略記号が表示されます。

値の説明は、CSS の text-overflow プロパティを参照してください。