ruby-overhang

ruby-overhang は、ルビのはみ出し方を指定する時に使います。（IE独自プロパティ）

Value（値）

auto: 初期値前後のテキストの上にもはみ出して表示
whitespace: 前後の空白スペースの上にだけはみ出して表示
none: 前後のテキストの上にだけはみ出して表示

HTMLタグ（ルビをふる時のタグ）

Value（値）

<ruby>～</ruby>: ルビをふるタグ HTML5から新しく追加された要素
<rb>: ルビをふる文字（Ruby Base の略) HTML5では使用しません
<rt>: ルビ文字（Ruby Text の略) HTML5から新しく追加された要素
<rp>: 未対応ブラウザでの括弧の表示（Ruby Parentheses の略) HTML5から新しく追加された要素

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   ruby.test1 { ruby-overhang: auto; }
   ruby.test2 { ruby-overhang: whitespace; }
   ruby.test3 { ruby-overhang: none; }
  </style>
 </head>
 <body>
   <p>
   『<ruby class="test1"><rb>夏草</rb><rp>（</rp><rt>なつくさ</rt><rp>)</rp></ruby>や
   <ruby class="test1"><rb>兵</rb><rp>（</rp><rt>つわもの</rt><rp>)</rp></ruby>どもが
   <ruby class="test1"><rb>夢</rb><rp>（</rp><rt>ゆめ</rt><rp>)</rp></ruby>の
   <ruby class="test1"><rb>跡</rb><rp>（</rp><rt>あと</rt><rp>)</rp></ruby>』
   </p>
   <p>（同上/test1をtest2に変える）</p>
   <p>（同上/test1をtest3に変える）</p>
 </body>
</html>

display

『夏草（なつくさ)や兵（つわもの)どもが夢（ゆめ)の跡（あと)』

※ 俳句：松尾芭蕉「おくのほそ道」より