ruby-overhang

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

ruby-overhang CSS 屬性指定 <ruby> 註釋是否懸掛在任何周圍文字之外。

試一試

ruby-overhang: auto;

ruby-overhang: none;

<section id="default-example">
  <p id="example-element">
    あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
    ><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
  </p>
</section>

#default-example {
  font-size: 2em;
}

語法

css

/* Keyword values */
ruby-overhang: auto;
ruby-overhang: none;

/* Global values */
ruby-overhang: inherit;
ruby-overhang: initial;
ruby-overhang: revert;
ruby-overhang: revert-layer;
ruby-overhang: unset;

值

auto: 當 Ruby 註釋容器長於其相應的基本容器時，註釋可能會部分重疊相鄰文字。是否以及懸掛多少由使用者代理確定。
none: 一個關鍵字，表示 Ruby 永遠不允許超出相鄰容器。

描述

ruby-overhang 屬性控制 Ruby 註釋文字框（<rt>）是否可以重疊 <ruby> 容器框之外的相鄰文字。

當不允許 Ruby 註釋文字懸掛時——當 <ruby> 元素上設定 ruby-overhang: none 時——該元素表現得像一個內聯框，就像它的 display 屬性設定為 inline，只有它自己的內容在其邊界內渲染，相鄰元素不跨越邊界框。

預設情況下，允許 <rt> 元素的內容懸掛，因此內容可能會重疊 <ruby> 容器框，部分渲染在周圍的內聯級別內容之上或之下。對於預設值 auto，內容可能會懸掛，但如果這樣做會重疊相鄰的 <rt> 元素或 display 值解析為 ruby-base 或 ruby-text 的元素，則不會懸掛。

正式定義

初始值	`auto`
應用於	Ruby 註釋容器
繼承性	是
計算值	指定的關鍵字
動畫型別	按計算值型別

正式語法

ruby-overhang = 
  auto  |
  none

示例

Ruby 懸掛基本文字

此示例演示了 ruby-overhang 屬性的兩個值。

HTML

我們包含兩個段落，它們除了類名之外，具有相同的 <ruby> 內容和結構。

html

<p class="auto">
  あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
  ><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
</p>

<p class="none">
  あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
  ><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
</p>

CSS

一個 1px 的紅色 outline 有助於突出顯示 <rt> 元素的文字註釋。第一段的 ruby-overhang: auto，第二段的 ruby-overhang: none。

css

p {
  font-size: 40px;
  display: block;
  margin: 0.5rem;
}
rt {
  font-size: 28px;
  outline: 1px solid red;
}
.auto {
  ruby-overhang: auto;
}
.none {
  ruby-overhang: none;
}

結果

當 ruby-overhang 設定為 none 時，註釋文字不允許重疊基本 Ruby 文字的相鄰框。如果你仔細觀察，你可能會注意到在第一段中，包含 Ruby 文字的紅色框略微重疊了不相關的 <ruby> 內容的一部分，而在支援的瀏覽器中，在 none 示例中，Ruby 內容和不相關的 Ruby 文字之間沒有重疊。

規範

規範
CSS Ruby 註釋佈局模組級別 1 # propdef-ruby-overhang

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題