连字符 | CSS-Tricks

hyphens 属性控制块级元素中文本的连字符。您可以完全阻止连字符的出现，允许其出现，或者仅在存在某些字符时允许其出现。

请注意，hyphens 对语言敏感。其查找断字机会的能力取决于语言，该语言在父元素的 lang 属性中定义。并非所有语言都得到支持，并且支持情况取决于具体的浏览器。

语法

.element {
  hyphens: none | manual | auto
}

`hyphens: none`

单词在换行处永远不会使用连字符，即使单词内的字符暗示了连字符可以或应该出现的位置。

`hyphens: manual`

单词仅在换行处断开，换行处单词内的字符暗示了换行机会。有两个字符暗示了换行机会

U+2010 (连字符)：“硬”连字符表示可见的换行机会。即使行实际上未在该点断开，连字符仍会呈现。字面意思是“ - ”。
U+00AD (软连字符)：不可见的“软”连字符。此字符不会以可见方式呈现；相反，它建议浏览器在必要时可以选择断开单词的位置。在 HTML 中，可以使用 &shy 插入软连字符。

`hyphens: auto`

单词可以在适当的连字符位置断开，这些位置可以由单词内的连字符字符（参见上文）确定，也可以由语言适当的连字符资源自动确定（如果浏览器支持或通过 @hyphenation-resource 提供）。

如果存在，单词内的条件连字符字符在确定单词内的连字符位置时优先于自动资源。

`hyphens: all`

已弃用，请勿使用。这仅在规范中临时用于测试。

演示

下面的演示包含许多段落，并且所有内容都设置为 hyphens: auto; 以演示连字符的概念。父元素上的 lang 属性设置为 en。

浏览器支持

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

Chrome	Firefox	IE	Edge	Safari
88	6*	10*	12*	5.1*

移动/平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	4.2-4.3*

Safari 5+ 需要 -webkit-，Firefox 6+ 需要 -moz-，IE 10+ 需要 -ms-，iOS 4.2+ 需要 -webkit-。

Chrome < 55 和 Android 浏览器实际上支持 -webkit-hyphens: none（这是默认值），但不支持其他任何值。

在 Firefox 和 Internet Explorer 中，自动连字符仅适用于某些语言（使用 lang 属性定义）。有关支持语言的完整列表，请参阅此注释。

如果您正在编写确实需要连字符的基于 Web 的文档，则可以使用 Hyphenator.js，这是一个基于庞大字典的库，它会自动将软连字符和零宽度空格插入到您的内容中。

如果没有 JavaScript，您将不得不依赖 hyphens 和 word-wrap

.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

hyphenate-limit-chars

.element { hyphenate-limit-chars: 10 3 4; }

Idorenyin Udoh

年鉴于 2022年7月18日

line-break

.element { line-break: strict; }

Geoff Graham

年鉴于 2021年7月12日

word-break

.element { word-break: break-all; }

word-break 换行

Chris Coyier

Florian

# 2013年10月10日

是否有任何迹象表明 Chrome 何时/是否会支持 hyphens: auto？

I would strongly a
dvise against brea
k-all unless you w
ant your text to l
ook like this.

它在错误的位置断词，不添加连字符，并且使“hyphens: auto”几乎毫无用处。

就我个人而言，我宁愿有“难看”的左右对齐文本，或者文本超出其容器，也不要那种混乱。

Serkan

评论永久链接# 2014年2月2日

当我尝试它时也发生了同样的情况。在错误的位置断开，并且根本没有连字符。

“Hyphenator.js”有多可靠，它看起来不错，因为我的网站是英文和德文。有人对此有经验吗？

taigeair

# 2013年11月25日

Chrome 不支持连字符很奇怪……

我刚刚使用了连字符，它适用于 Safari，但不适用于 Chrome。请参阅表格上的“neurotransmitter”一词

http://www.sleepmoo.com/store.html

由于几乎每个人都在使用 Chrome，所以您是说我们应该使用 Hyphenator.js 吗？

*需要注意的是，当您在手机上使用 Chrome 时，连字符有效。

Tanny OHaley

评论永久链接# 2014年11月13日

Chrome 在 iOS 设备上支持连字符，因为它使用移动版 Safari 渲染网页。

Tomas M.

# 2014年1月11日

我们是否也应该添加

word-wrap: break-word;

virakamrith

# 2014年2月23日

它不支持高棉 Unicode。如何使其支持高棉 Unicode？

Fnordius

评论永久链接# 2021年7月13日

不幸的是，每种语言的连字符化都使用浏览器中的词典，并且除了英语之外的大多数语言都不受支持。这是因为有人必须付出努力来创建和校对每个词典。

Adam Singer

# 2014年5月15日

这真的很有帮助。谢谢！

esp

# 2014年5月28日

太棒了 - 谢谢！我一直在尝试以多种不同的方式摆脱这些连字符，但没有一种奏效。我将您的连字符类与属性设置为“none”一起使用，它在 Firefox 和 IE 中完美运行。我喜欢你。

Faux_Real

# 2014年10月17日

今天看到一个页面在使用 Chrome 时出现奇怪的断行。所以我搜索了一下可能发生了什么，并找到了这篇内容丰富的文章。

供遇到本文的其他读者参考，Chrome 似乎仍然不支持连字符 :(

https://caniuse.cn/#search=hyphen

Tanny OHaley

# 2014年11月13日

我在 2012 年 11 月将此添加到我的网站中。我能够使文本左右对齐，看起来好多了，也更易读。然后我在 Chrome 中尝试了它。真是场灾难。我不得不关闭左右对齐，因为它在 Chrome 中看起来很糟糕。

浏览器在一个段落中可以连字符化的单词数量也存在问题，排版师不会喜欢。我想说它还没有准备好。我仍然在使用它，但我已经关闭了文本左右对齐，因为 Chrome 的缘故。

Chrome 什么时候会支持连字符化？它们落后于 Firefox、IE 和 Safari（移动端和桌面端）。

Noelle

# 2014年11月21日

不应该使用 -ms-word-break: break-word（而不是 break-all）吗？对我来说，-ms-word-break: break-all 只是在单词中的任何位置断开单词，而 -ms-hyphens:auto; 没有效果。

Micah

# 2015年3月3日

这需要更新。Firefox 无法很好地与 hyphens: auto 和 word-break: break-all 同时使用。我必须使用 @supports 规则才能使连字符在 FF 3x+ 上显示。

@supports not (hyphens: auto) {
    .class {
        word-break: break-all;
    }
}

.class {
    /* Non standard for webkit
     * overrides blink default */
    word-break: break-word;

    hyphens: auto;
}

Lynda

评论永久链接# 2015年3月10日

Micah，

我在 Firefox 中遇到了类似的问题，但能够解决它们。您可以在 Stackoverflow 上看到我的问题发生了什么：http://stackoverflow.com/q/28976543/825757
Martino

评论永久链接# 2015年3月30日

嗨，Micah，感谢你的分享！

Effeilo

# 2015年4月14日

对我不起作用。对于 FF 3x+，我使用的是这个

@supports not (-moz-hyphens: auto) {
    body {
        word-break: break-all;
    }
}


body {
  /* Old IE Support */
  -ms-word-break: break-all;

  /* Non standard for webkit */
  word-break: break-word;

  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

Luqman Haji Barqab

# 2015年3月30日

一种选择是在可能断开的位置在文本中插入软连字符

Mister Reader

# 2015年7月6日

网页中的连字符化是不必要且难看的，尤其是在不应使用完全对齐的情况下。

Mist a reader！

评论永久链接# 2015年7月9日

在响应式设计方面，即使在小尺寸显示屏上显示拼写很长的单词也具有很好的未来。但由于浏览器支持仍然存在明显的滞后，因此在我看来它目前还不可用……不幸的是……
Ben

评论永久链接# 2017年12月17日

尝试在 320 像素宽（iPhone 5）的显示屏上处理德语。

Michael

# 2015年8月3日

我最近做了一项研究[1]，发现将word-break: break-all;与hyphens: auto;结合使用在Firefox中无法按预期工作，因为单词不再进行连字符断行。相反，我发现可以使用overflow-wrap: break-word，它在Firefox和不支持word-break的Opera Mini上都能很好地工作。

.hyphenate {
  overflow-wrap: break-word
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

[1] https://justmarkup.com/log/2015/07/31/dealing-with-long-words-in-css/

Julian

# 2015年11月30日

@Effeilo 谢谢，这在我的FF 41和FF 44中有效。
@Micah 我刚刚在FF 41中测试了你的解决方案，它不起作用。

Julian

评论永久链接# 2015年11月30日

我需要更正一下。
@Micah 你的解决方案在MS Edge中不起作用！

我刚刚测试了@Michael的解决方案，它在所有浏览器（Chrome、Safari、Firefox、Edge、IE9+）中都有效。感谢分享。

Laura

# 2016年2月3日

所以在阅读了这个帖子并回顾了各种规范后，为了**避免**连字符断行，我想出了这个方法

.avoid-bad-hyphens {
  word-break: keep-all;
  overflow-wrap: normal;
  word-wrap: normal;
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
  text-overflow: ellipsis;
}

注意：我使用“manual”值是因为这种情况最常出现在使用较大字体的标题中。让编辑有机会插入软连字符似乎很有意义。我添加了溢出省略号作为后备方案（但尚未测试）。你觉得怎么样？

Laura

评论永久链接# 2016年2月3日

**说明：**text-overflow: ellipsis;旨在作为最后一个单词不适合时的后备方案。显然，它不会帮助块中的上游内容。

amn

# 2016年3月9日

链接http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/指向的文章是MDN的法语翻译。仅此而已。

Tobias Buschor

# 2016年3月23日

如果你想跨浏览器使用hyphens:auto，请为这个Chromium问题加星标并发表评论
https://bugs.chromium.org/p/chromium/issues/detail?id=47083

Thomas

# 2016年8月5日

文章的代码段应该更新，没有理由声明

   ...
    word-break: break-all;

     // Non standard for webkit
     word-break: break-word;
    ...

并使用

     -ms-word-break: break-all;
     word-break: break-all;

这只会强制在单词中的随机位置断行以换行，在支持的情况下避免连字符断行

Luis

# 2016年8月27日

感谢Sara的文章。我尝试使用了一些你的建议，但它们都以某种方式失败了。

在我看来，连字符断行距离实用化还有很长的路要走。最好的方法是调整文本并祈祷一切顺利。在表格中，我使用来对长单词进行连字符断行，否则在平板电脑和智能手机上结果会很糟糕。简而言之，除非所有浏览器专家都同意制定标准规则，否则这一切都只是浪费时间，以及像我们这样的白痴浪费的大量精力，试图制作完美的网页。
是的，是的，我知道他们是白痴，而不是我们。

Derek

# 2016年12月21日

总的来说，我认为应该避免使用hypens: auto属性。

升级到Chrome 55.0.2883.95后，此属性导致我的网站上的表格数据出现严重问题

表格数据重叠到相邻列中，
任意断行，
以及浏览器无法根据最宽/最大的单元格调整列大小。

我越想越觉得这个属性根本没什么用…

Jass

评论永久链接# 2019年9月14日

只有Chrome有问题，其他浏览器没有。

访问https://bugs.chromium.org/p/chromium/issues/detail?id=47083并为该功能请求投票！

Zak

# 2017年3月12日

仅供参考，Chrome从2016年11月开始支持hyphens属性。https://www.chromestatus.com/feature/5642121184804864

DaVince

# 2018年8月15日

令人惊奇的是，这么多年过去了，Chrome仍然依赖于浏览器特定的前缀！我想知道是什么原因导致了延迟。

好吧，前缀有效，所以我没有抱怨。

dave

# 2018年9月25日

看起来hyphenate-resources已从规范中删除

Valentin Born

# 2020年12月24日

看起来Chrome 88可能会赶上进度，最终！ :)

语法

hyphens: none

hyphens: manual

hyphens: auto

hyphens: all

演示