连字符

基线 2023

新可用

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

**hyphens** CSS 属性指定当文本换行到多行时单词应如何连字符化。它可以完全防止连字符化，在文本中手动指定的点处连字符化，或者让浏览器在适当的地方自动插入连字符。

试一试

**注意：**在上面的演示中，字符串“An extraordinarily long English word！”包含隐藏的 ­（软连字符）字符：An extra­ordinarily long English word!。此字符用于指示在指定 hyphens: manual; 时插入连字符的潜在位置。

连字符化规则特定于语言。在 HTML 中，语言由 lang 属性确定，并且浏览器只有在此属性存在且相应的连字符化词典可用时才会连字符化。在 XML 中，必须使用 xml:lang 属性。

**注意：**定义如何执行连字符化的规则未由规范明确定义，因此确切的连字符化可能因浏览器而异。

如果支持，则可以使用 hyphenate-character 指定在换行结束时使用的替代连字符化字符。

语法

css
/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

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

hyphens 属性指定为从以下列表中选择的单个关键字值。

值

none

单词在换行符处不会断开，即使单词内的字符建议换行点。行只会围绕空格换行。

manual

默认值。单词仅在单词内的字符建议换行机会时才会为换行断开。有关详细信息，请参见下面的 建议换行机会。

auto

浏览器可以自由地在合适的连字符化点自动断开单词，遵循其选择的任何规则。但是，存在建议的换行机会（请参见下面的 建议换行机会）将覆盖自动断点选择。

**注意：**auto 设置的行为取决于正确标记的语言以选择相应的连字符化规则。您必须使用 lang HTML 属性指定语言才能保证以该语言应用自动连字符化。

**注意：**如果您应用 word-break: break-all，则不会显示任何连字符，即使单词在连字符化点断开。

建议换行机会

有两个 Unicode 字符用于手动指定文本中潜在的换行点

U+2010（连字符）

“硬”连字符表示可见的换行机会。即使在该位置实际上没有换行，连字符也会被渲染。

U+00AD (SHY)

一个不可见的，“软”连字符。此字符不会被可见地渲染；相反，它标记了一个浏览器在需要连字符时应该断词的位置。在 HTML 中，使用 ­ 插入软连字符。

注意：当 HTML <wbr> 元素导致换行时，不会添加连字符。

正式定义

初始值manual
应用于所有元素
继承是
计算值如指定
动画类型离散

正式语法

hyphens = 
  none    |
  manual  |
  auto

示例

指定文本连字符

此示例使用三个类，每个类对应 hyphens 属性的一种可能的配置。

HTML

html
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

结果

规范

规范
CSS 文本模块级别 3
# hyphens 属性

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅