最終更新日 2021年6月6日

ruby-overhangプロパティ

ruby-overhangは、ルビが長い時に、ルビと関係ない前後の文字の配置方法を指定するプロパティです。

指定できる値は「auto」「start」「end」「none」のいずれかです。以下がイメージ図です。

ruby-overhang

以下は、関連プロパティです。

CSS3での変更点

・ruby-overhangは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
none	「display: ruby-text;」状態の要素を子に持つ要素（ruby要素）	あり

値	説明
auto	ブラウザの設定に従います。通常、前後の文字はルビの下に入ります。
start	前の文字のみ、ルビの下に入ります。
end	後ろの文字のみ、ルビの下に入ります。
none	前後の文字はルビの下に入りません。（初期値）

サンプルコード

ruby-overhang: auto;
ruby-overhang: start;
ruby-overhang: end;
ruby-overhang: none;

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。