hyphenate-character

Baseline 2023

新推出

自 2023 年 9 月起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

hyphenate-character CSS 属性设置在连字符断字之前，行末使用的字符（或字符串）。

自动连字符和软连字符都根据指定的 hyphenate-character 值显示。

试一试

hyphenate-character: auto;

hyphenate-character: "=";

hyphenate-character: "—";

<section id="default-example">
  <p id="example-element">An extraordinarily long English word!</p>
</section>

#example-element {
  border: 2px dashed #999999;
  font-size: 1.5rem;
  text-align: left;
  width: 7rem;
  hyphens: auto;
}

语法

css

hyphenate-character: <string>;
hyphenate-character: auto;

该值要么设置用于代替连字符的字符串，要么指示用户代理根据当前的排版约定选择一个合适的字符串（默认）。

值

<string>: 在连字符断字之前，行末使用的 <string>。如果使用的字符过多，用户代理可能会截断此值。
auto: 用户代理根据内容语言的排版约定选择合适的字符串。这是默认属性值，只有在需要覆盖不同的继承值时才需要显式设置。

正式定义

初始值	`auto`
应用于	所有元素
继承性	是
计算值	同指定值
动画类型	离散

正式语法

hyphenate-character = 
  auto      |
  <string>

示例

此示例显示了两个相同的文本块，它们的 hyphens 属性设置为确保它们在需要的地方断字，并在软连字符断字处断字（使用  创建）。第一个文本块的连字符值更改为等号 (=)。第二个文本块未设置 hyphenate-character，这对于支持此属性的用户代理来说等同于 hyphenate-character: auto。

HTML

html

<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="en">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character is not set</code></dt>
  <dd lang="en">Superc&shy;alifragilisticexpialidocious</dd>
</dl>

CSS

css

dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}

结果

规范

规范
CSS 文本模块第 4 级 # propdef-hyphenate-character

浏览器兼容性

另见

相关 CSS 属性：hyphens、overflow-wrap。

帮助改进 MDN

了解如何贡献

此页面由MDN 贡献者上次修改于2025 年 8 月 13 日。

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