ruby-overhang

InternetExplorer独自のプロパティで、<rb>要素よりも<rt>要素のほうが長い場合に、どこまでルビがはみ出てもよいかを指定します。

ブラウザ

IE5～(MSDNに記載されていますが、動作確認できませんでした。)

書式

要素[.class名][#id名]{ ruby-overhang : 値; }

▲PageTop

指定できる値

値	初期値	意味
auto	○	前後のテキストにもはみ出ます。
whitespace		前後にあるスペース分だけはみ出ます。
none		はみ出して表示しません。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        ruby-overhang : auto;
      }
      #sample2 {
        ruby-overhang : whitespace;
      }
      #sample3 {
        ruby-overhang : none;
      }
      rt {
        font-size : xx-small;
      }
    </style>
  </head>
  <body>
    <ruby id="sample1">
    <rb>HTML</rb><rp>(</rp><rt>エイチティーエムエル</rt><rp>)</rp>
    </ruby>には多くの要素(タグ)があります。「ruby-overhang : auto」
    <br><br>
    <ruby id="sample2">
    <rb>HTML</rb><rp>(</rp><rt>エイチティーエムエル</rt><rp>)</rp>
    </ruby>には多くの要素(タグ)があります。「ruby-overhang : whitespace」
    <br><br>
    <ruby id="sample3">
    <rb>HTML</rb><rp>(</rp><rt>エイチティーエムエル</rt><rp>)</rp>
    </ruby>には多くの要素(タグ)があります。「ruby-overhang : none」
  </body>
</html>

表示結果

HTML(エイチティーエムエル) には多くの要素(タグ)があります。「ruby-overhang : auto」

HTML(エイチティーエムエル) には多くの要素(タグ)があります。「ruby-overhang : whitespace」

HTML(エイチティーエムエル) には多くの要素(タグ)があります。「ruby-overhang : none」

▲PageTop

ruby-overhang

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

HTML

CSS