在此页

• 句法
• Suggesting line break opportunities
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. In XML, the xml:lang attribute must be used.

注意： The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

句法

/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;
				

hyphens property is specified as a single keyword value chosen from the list below.

值

none

Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace.

manual

Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See Suggesting line break opportunities below for details.

auto

The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection when present.

注意： auto setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules. You must specify a language using the lang HTML attribute to guarantee that automatic hyphenation is applied in that language.

Suggesting line break opportunities

There are two Unicode characters used to manually specify potential line break points within text:

U+2010 (HYPHEN)

The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.

U+00AD (SHY)

An invisible, " s oft" hy phen. This character is not rendered visibly; instead, it marks a place where the browser should break the word if hyphenation is necessary. In HTML, use ­ to insert a soft hyphen.

When the HTML <wbr> element leads to a line break, no hyphen is added.

形式定义

初始值	manual
适用于	所有元素
继承	yes
计算值	如指定
动画类型	discrete

形式句法

none | manual | auto
					

范例

Specifying text hyphenation

This example uses three classes, one for each possible configuration of the hyphens 特性。

HTML

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

CSS

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

结果

规范

规范	状态	注释
CSS Text Module Level 3 The definition of 'hyphens' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
hyphens	Chrome 部分支持 55 注意事项 部分支持 55 注意事项 注意事项 auto value is only supported on macOS and Android and for languages the OS provides hyphenation for. 完整支持 13 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 Only -webkit-hyphens: none is supported.	Edge 部分支持 12 Prefixed 注意事项 部分支持 12 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -ms- 注意事项 Only works if the specified language is the same as the language of the underlying OS.	Firefox 完整支持 43 完整支持 43 完整支持 6 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.	IE 部分支持 10 Prefixed 注意事项 部分支持 10 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -ms- 注意事项 Only works if the specified language is the same as the language of the underlying OS.	Opera 部分支持 44 注意事项 部分支持 44 注意事项 注意事项 auto value is only supported on macOS and Android.	Safari 完整支持 5.1 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android 完整支持 55	Chrome Android 完整支持 55	Firefox Android 完整支持 43 完整支持 43 完整支持 6 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.	Opera Android 完整支持 43	Safari iOS 完整支持 4.2 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android 完整支持 6.0
Hyphenation dictionary for Afrikaans (af, af-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Bulgarian (bg, bg-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Catalan (ca, ca-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Croatian (hr, hr-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 9.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 9.3	Samsung Internet Android 不支持 No
Hyphenation dictionary for Czech (cs, cs-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 No	IE 不支持 No	Opera 不支持 No	Safari 完整支持 9.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 完整支持 9.3	Samsung Internet Android 不支持 No
Hyphenation dictionary for Danish (da, da-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Dutch (nl, nl-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for English (en, en-*)	Chrome 完整支持 55	Edge 完整支持 12	Firefox 完整支持 6 注意事项 完整支持 6 注意事项 注意事项 For English, Firefox uses an en-US dictionary	IE 完整支持 10	Opera 完整支持 44	Safari 完整支持 5.1 注意事项 完整支持 5.1 注意事项 注意事项 For English, Safari uses different en-GB and en-US dictionaries.	WebView Android 完整支持 55	Chrome Android 完整支持 55	Firefox Android 完整支持 6 注意事项 完整支持 6 注意事项 注意事项 For English, Firefox uses an en-US dictionary	Opera Android 完整支持 43	Safari iOS 完整支持 6 注意事项 完整支持 6 注意事项 注意事项 For English, Safari uses different en-GB and en-US dictionaries.	Samsung Internet Android 完整支持 6.0
Hyphenation dictionary for Esperanto (eo, eo-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Estonian (et, et-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Finnish (fi, fi-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 9.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 9.3	Samsung Internet Android 不支持 No
Hyphenation dictionary for French (fr, fr-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Galician (gl, gl-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 9	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 9	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Hungarian (hu, hu-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 9	IE 不支持 No	Opera 不支持 No	Safari 完整支持 9.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 9	Opera Android 不支持 No	Safari iOS 完整支持 9.3	Samsung Internet Android 不支持 No
Hyphenation dictionary for Icelandic (is, is-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Interlingua (ia, ia-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Italian (it, it-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 9	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 9	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Kurmanji (kmr, kmr-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Latin (la, la-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Lithuanian (lt, lt-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Mongolian (mn, mn-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Polish (pl, pl-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 31	IE 不支持 No	Opera 不支持 No	Safari 完整支持 9.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 31	Opera Android 不支持 No	Safari iOS 完整支持 9.3	Samsung Internet Android 不支持 No
Hyphenation dictionary for Portuguese (pt, pt-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 9.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 9.3	Samsung Internet Android 不支持 No
Hyphenation dictionary for Brazilian Portuguese (pt-BR)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8 注意事项 完整支持 8 注意事项 注意事项 For Brazilian Portuguese, Firefox uses a Portuguese dictionary.	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8 注意事项 完整支持 8 注意事项 注意事项 For Brazilian Portuguese, Firefox uses a Portuguese dictionary.	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Russian (ru, ru-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Slovenian (sl, sl-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Spanish (es, es-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Swedish (sv, sv-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Turkish (tr, tr-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 9	IE 不支持 No	Opera 不支持 No	Safari 完整支持 5.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 9	Opera Android 不支持 No	Safari iOS 完整支持 5	Samsung Internet Android 不支持 No
Hyphenation dictionary for Ukrainian (uk, uk-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 9	IE 不支持 No	Opera 不支持 No	Safari 完整支持 9.1	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 9	Opera Android 不支持 No	Safari iOS 完整支持 9.3	Samsung Internet Android 不支持 No
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Hyphenation dictionary for Welsh (cy, cy-*)	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 8	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 8	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

见实现注意事项。

见实现注意事项。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• content
• overflow-wrap (formerly word-wrap )
• word-break

元数据

• 最后修改： 2020 年 7 月 17 日

相关话题

1. CSS
2. CSS 参考
3. CSS Text
4. 特性

   1. hanging-punctuation
   2. hyphens
   3. letter-spacing
   4. line-break
   5. overflow-wrap
   6. paint-order
   7. tab-size
   8. text-align
   9. text-align-last
   10. text-indent
   11. text-justify
   12. text-size-adjust
   13. text-transform
   14. white-space
   15. word-break
   16. word-spacing