1. Web
  2. CSS
  3. hyphens

hyphens

基线 2023 *
新推出

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

* 此特性的某些部分可能存在不同级别的支持。

hyphens CSS 属性指定当文本跨多行换行时，单词应如何进行连字符处理。它可以完全阻止连字符，在文本中手动指定位置进行连字符，或者让浏览器在适当的位置自动插入连字符。

试一试

hyphens: none;

hyphens: manual;

hyphens: auto;

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

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

注意： 在上面的演示中，字符串“An extraordinarily long English word!”包含隐藏的 &shy;（软连字符）字符：An extra&shy;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 中，使用 &shy; 插入软连字符。

注意： 当 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 Text Module Level 3
# 连字符属性

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.