1. Web
  2. CSS
  3. ruby-overhang

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 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题