HTML 中的软连字符（<wbr> 与 ­）

Soft hyphen in HTML (<wbr> vs. &shy;)

提问by Pontus

How do you solve the problem with soft hyphens on your web pages? In a text there can be long words which you might want to line break with a hyphen. But you do not want the hyphen to show if the whole word is on the same line.

您如何解决网页上的软连字符问题？在文本中可能有很长的单词，您可能希望用连字符换行。但是您不希望连字符显示整个单词是否在同一行。

According to comments on this page<wbr>is a non standard "tag soup invented by Netscape". It seems like ­has its problems with standard compliance as well. There seems to be no way to get a working solution for all browsers.

根据此页面<wbr>上的评论是非标准的“网景发明的标签汤”。似乎也­有符合标准的问题。似乎没有办法为所有浏览器找到一个可行的解决方案。

Which is your way for handling soft hyphens and why did you choose it? Is there a preferred solution or best practice?

您处理软连字符的方式是什么，为什么选择它？是否有首选的解决方案或最佳实践？

---

---

请参阅相关的 SO 讨论 here在这里。

采纳答案by Marco

Unfortunately, &shy's support is so inconsistent between browsers that it can't really be used.

不幸的是，&shy的支持在浏览器之间是如此不一致，以至于无法真正使用。

QuirksMode is right -- there's no good way to use soft hyphens in HTML right now. See what you can do to go without them.

QuirksMode 是正确的——目前没有在 HTML 中使用软连字符的好方法。看看没有它们你能做什么。

2013 edit: According to QuirksMode, ­now works/is supported on all major browsers.

2013 年编辑：根据 QuirksMode，­现在所有主要浏览器都支持/支持。

回答by user56reinstatemonica8

Feb 2015 summary (partially updated Nov 2017)

2015 年 2 月摘要（2017 年 11 月部分更新）

They all perform pretty well, ­edges it as Google can still index of words containing it.

它们都表现得很好，­边缘它，因为谷歌仍然可以索引包含它的单词。

• In browsers:­and ­both display as expected in major browsers (even old IE!). <wbr>isn't supported in recent versions of IE (10 or 11) and doesn't work properly in Edge.
• When copied and pasted from browsers:(tested 2015) as expected for ­and ­for Chrome and Firefox on Mac, on Windows (10), it keeps the characters and pastes hard hyphens into Notepad and invisible soft hyphens into applications that support them. IE (win7) always pastes with hyphens, even in IE10, and Safari (Mac) copies in a way which pastes as hyphens in some applications (e.g. MS Word), but not others
• Find on pageworks for ­and ­on all browsers except IE which only matches exact copied-and-pasted matches (even up to IE11)
• Search engines:Google matches words containing ­with words typed normally. As of 2017 it appears to no longer match words containing ­. Yandex appers to be the same. Bing and Baidu seem to not match either.

• 在浏览器中：­并且­都在主要浏览器中按预期显示（甚至是旧的 IE！）。<wbr>IE 的最新版本（10 或 11）不支持，并且在 Edge 中无法正常工作。
• 当从浏览器复制和粘贴时：（2015 年测试）正如预期的那样­，­对于 Mac 上的 Chrome 和 Firefox，在 Windows (10) 上，它会保留字符并将硬连字符粘贴到记事本中，并将不可见的软连字符粘贴到支持它们的应用程序中。IE (win7) 总是粘贴连字符，即使在 IE10 中，Safari (Mac) 复制的方式在某些应用程序（例如 MS Word）中粘贴为连字符，而不是其他应用程序
• 查找页作品­和­上除了IE以外所有浏览器只匹配精确复制和粘贴的比赛（甚至高达IE11）
• 搜索引擎：Google 匹配包含­正常键入的单词的单词。截至 2017 年，它似乎不再匹配包含­. Yandex 似乎是一样的。必应和百度似乎也不匹配。

---

---

Test it

测试一下

For up-to-date live testing, here are some examples of unique words with soft hyphens.

对于最新的实时测试，以下是一些带有软连字符的独特单词的示例。

• ­- confumbabbl­ication­ism- confumbabbl­ication­ism
  • ..............................................................................................................confumbabbl­ication­ism
  • ..................................................................................................................confumbabbl­ication­ism

• ­- confumbabbl­ication­ism- 混淆论
  • ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… .....混淆论
  • ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ....... 混淆论

<wbr>- donfounbabbl<wbr>ication<wbr>ism. This site removes <wbr/>from output. Here's a jsbin.com snippet for testing.

<wbr>- donfounbabbl<wbr>ication<wbr>ism. 此站点<wbr/>从输出中删除。这是用于测试的jsbin.com 片段。

• ­- eonfulbabbl­ication­ism- eonfulbabbl­ication­ism
  • .................................................................................................................eonfulbabbl­ication­ism
  • ....................................................................................................................eonfulbabbl­ication­ism

• ­- eonfulbabbl­ication­ism- 丰富的语言
  • ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………… ………………
  • ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ..... 完美的语言主义

Here they are with no shy hyphens (this is for copying and pasting into find-on-page testing; written in a way which won't break the search engine tests):

在这里，它们没有害羞的连字符（这是为了复制和粘贴到页面查找测试中；以不会破坏搜索引擎测试的方式编写）：

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Display across browsers

跨浏览器显示

Success: displaying as a normal word, except where it should break, when it breaks and hyphenates in the specified place.

成功：显示为普通单词，除了它应该中断的地方，当它在指定的位置中断和连字符时。

Failure: displaying unusually, or failing to break in the intended place.

失败：显示异常，或未能在预期的地方打破。

• Chrome (40.0.2214.115, Mac): ­success, <wbr>success, ­success
• Firefox (35.0.1, Mac): ­success, <wbr>success, ­success
• Safari (6.1.2, Mac): ­success, <wbr>not tested yet, ­success
• Edge (Windows 10): ­success, <wbr>fail(break but no hyphen), ­success
• IE11 (Windows 10): ­success, <wbr>fail(no break), ­success
• IE10 (Windows 10): ­success, <wbr>fail(no break), ­success
• IE8 (Windows 7): erratic - sometimes, none of them work at all and they all just follow css word-wrap. Sometimes, they seem to all work. Not yet found any clear pattern as to why.
• IE7 (Windows 7): ­success, <wbr>success, ­success

• Chrome（40.0.2214.115，Mac）：­成功，<wbr>成功，­成功
• Firefox (35.0.1, Mac)： ­成功，<wbr>成功，­成功
• Safari (6.1.2, Mac)： ­成功，<wbr>尚未测试，­成功
• Edge（Windows 10）：­成功、<wbr>失败（中断但没有连字符）、­成功
• IE11（Windows 10）：­成功、<wbr>失败（没有中断）、­成功
• IE10 (Windows 10)：­成功、<wbr>失败（没有中断）、­成功
• IE8（Windows 7）：不稳定 - 有时，它们根本不起作用，它们都只遵循 css word-wrap。有时，它们似乎都有效。还没有找到任何明确的模式来说明原因。
• IE7（Windows 7）：­成功，<wbr>成功，­成功

Copy-paste across browsers

跨浏览器复制粘贴

Success: copying and pasting the whole word, unhyphenated. (tested on Mac pasting into browser search, MS Word 2011, and Sublime Text)

成功：复制并粘贴整个单词，不带连字符。（在 Mac 上测试粘贴到浏览器搜索、MS Word 2011 和 Sublime Text）

Failure: pasting with a hyphen, space, line break, or with junk characters.

失败：使用连字符、空格、换行符或垃圾字符粘贴。

• Chrome (40.0.2214.115, Mac): ­success, <wbr>success, ­success
• Firefox (35.0.1, Mac): ­success, <wbr>success, ­success
• Safari (6.1.2, Mac): ­failinto MS Word (pastes all as hyphens), success in other applications <wbr>fail, ­failinto MS Word (pastes all as hyphens), success in other applications
• IE10 (Win7): ­failpastes all as hyphens, <wbr>fail, ­failpastes all as hyphens
• IE8 (Win7): ­failpastes all as hyphens, <wbr>fail, ­failpastes all as hyphens
• IE7 (Win7): ­failpastes all as hyphens, <wbr>fail, ­failpastes all as hyphens

• Chrome（40.0.2214.115，Mac）：­成功，<wbr>成功，­成功
• Firefox (35.0.1, Mac)： ­成功，<wbr>成功，­成功
• Safari (6.1.2, Mac): ­failinto MS Word (paste all as hyphens), success in other applications <wbr>fail, ­failinto MS Word (paste all as hyphens), 在其他应用程序中成功
• IE10 (Win7): ­fail全部粘贴为连字符，<wbr>fail，­fail全部粘贴为连字符
• IE8 (Win7): ­fail全部粘贴为连字符，<wbr>fail，­fail全部粘贴为连字符
• IE7 (Win7): ­fail全部粘贴为连字符，<wbr>fail，­fail全部粘贴为连字符

Search engine matching

搜索引擎匹配

Updated in November 2017. <wbr>not tested because StackOverflow's CMS stripped it out.

2017 年 11 月更新。<wbr>未测试，因为 StackOverflow 的 CMS 将其删除。

Success: searches on the whole, non-hyphenated word find this page.

成功：搜索整个非连字符词找到此页面。

Failure: search engines only find this page on searches for the broken segments of the words, or a word with hyphens.

失败：搜索引擎仅在搜索单词的损坏部分或带有连字符的单词时才能找到此页面。

• Google: ­fails, ­succeeds
• Bing: ­fails, ­fails
• Baidu: ­fails, ­fails (can match fragments within longer strings but not the words on their own containing a ­or ­)
• Yandex: ­fails, ­succeeds (though it's possible it's matching a string fragment like Baidu, not 100% sure)

• 谷歌：­失败，­成功
• Bing：­失败，­失败
• 百度：­失败，­失败（可以匹配较长字符串中的片段，但不能匹配自己包含­或的单词­）
• Yandex：­失败，­成功（虽然它可能匹配百度之类的字符串片段，但不是 100% 确定）

Find on page across browsers

跨浏览器在页面上查找

Success and failure as search engine matching.

作为搜索引擎匹配的成功和失败。

• Chrome (40.0.2214.115, Mac): ­success, <wbr>success, ­success
• Firefox (35.0.1, Mac): ­success, <wbr>success, ­success
• Safari (6.1.2, Mac): ­success, <wbr>success, ­success
• IE10 (Win7): ­failonly matches when both contain shy hyphens, <wbr>success, ­failonly matches when both contain shy hyphens
• IE8 (Win7): ­failonly matches when both contain shy hyphens, <wbr>success, ­failonly matches when both contain shy hyphens
• IE7 (Win7): ­failonly matches when both contain shy hyphens, <wbr>success, ­failonly matches when both contain shy hyphens

• Chrome（40.0.2214.115，Mac）：­成功，<wbr>成功，­成功
• Firefox (35.0.1, Mac)： ­成功，<wbr>成功，­成功
• Safari (6.1.2, Mac)： ­成功，<wbr>成功，­成功
• IE10 (Win7)：­fail仅在两者都包含连字符时匹配，<wbr>success、­fail仅在两者都包含连字符时匹配
• IE8 (Win7)：­fail仅在两者都包含连字符时匹配，<wbr>success、­fail仅在两者都包含连字符时匹配
• IE7 (Win7)：­fail仅在两者都包含连字符时匹配，<wbr>success, ­fail仅在两者都包含连字符时匹配

回答by Dominik

There is an ongoing effort to standardize hyphenation in CSS3.

正在努力标准化 CSS3 中的连字符。

Some modern browsers, notably Safari and Firefox, already support this. Here is a good and up to date reference on browser support.

一些现代浏览器，特别是 Safari 和 Firefox，已经支持这一点。这是有关浏览器支持的最新好参考。

Once the CSS hyphenation gets implemented universally, that would be the best solution. In the meantime, I can recommend Hyphenator- a JS script that figures out how to hyphenate your text in the way most appropriate for a particular browser.

一旦 CSS 断字得到普遍实施，那将是最好的解决方案。在此期间，我可以推荐连字符-一个JS脚本，人物如何用连字符在最合适的特定浏览器的方式文本。

Hyphenator:

连字符：

• relies on Franklin M. Liangs hyphenation algorithm, commonly known from LaTeX and OpenOffice.
• uses CSS3 hyphenation where it is available,
• automatically inserts ­on most other browsers,
• supports multiple languages,
• is highly configurable,
• gracefully falls back in case javascript is not enabled.

• 依赖于Franklin M. Liang 的断字算法，从 LaTeX 和 OpenOffice 中广为人知。
• 在可用的地方使用 CSS3 连字符，
• ­在大多数其他浏览器上自动插入，
• 支持多种语言，
• 高度可配置，
• 如果 javascript 未启用，则优雅地回退。

I've used it and it works great!

我用过它，效果很好！

回答by Matthias Ronge

I use ­, inserted manually where necessary.

我使用­, 在必要时手动插入。

I always find it a pity that people don't use techniques because there is some—maybe old or strange—browser around which doesn't handle them the way they were specified. I found that ­is working properly in both recent Internet Explorer and Firefox browsers, that should be enough. You may include a browser check telling people to use something mature or continue at their own risk if they come around with some strange browser.

我总是觉得很遗憾人们不使用技术，因为有一些——可能是旧的或奇怪的——浏览器不能按照指定的方式处理它们。我发现它­在最近的 Internet Explorer 和 Firefox 浏览器中都可以正常工作，这应该足够了。您可以包括浏览器检查，告诉人们使用成熟的东西，或者如果他们遇到一些奇怪的浏览器，则继续使用，风险自负。

Syllabification isn't that easy and I cannot recommend leaving it to some Javascript. It's a language specific topic and may need to be carefully revised by the deskman if you don't want it to turn your text irritating. Some languages, such as German, form compound words and are likely to lead to decomposition problems. E.g. Spargelder(germ.saved money, pl.) may, by syllabification rules, be wrapped in two places (Spar-gel-der). However, wrapping it in the second position, turns the first part to show up as Spargel-(germ.asparagus), activating a completely misleading concept in the head of the reader and therefore shoud be avoided.

音节化不是那么容易，我不建议将它留给一些 Javascript。这是一个特定于语言的主题，如果您不希望它使您的文本变得烦人，则可能需要由服务人员仔细修改。某些语言，例如德语，会形成复合词，并且可能会导致分解问题。例如Spargelder（germ.saved money, pl.），根据音节规则，可以包含在两个地方（Spar-gel-der）。然而，将它包裹在第二个位置，将第一部分变成Spargel-（细菌。芦笋），在读者的脑海中激活一个完全误导的概念，因此应该避免。

And what about the string Wachstube? It could either mean ‘guardroom' (Wach-stu-be) or ‘tube of wax' (Wachs-tu-be). You may probably find other examples in other languages as well. You should aim to provide an environment in which the deskman can be supported in creating a well-syllabified text, proof-reading every critical word.

那么字符串Wachstube呢？它可能意味着“警卫室”（Wach-stu-be）或“蜡管”（Wachs-tu-be）。您可能还会找到其他语言的其他示例。你的目标应该是提供一个环境，在这个环境中，服务人员可以支持创建一个音节分明的文本，校对每个关键单词。

回答by Andreas Rejbrand

It is very important to notice that, as of HTML5, <wbr>and ­are not supposed to do the same thing!

这是发现很重要，因为HTML5的，<wbr>和­不应该做同样的事情！

Soft hyphens

软连字符

­is a soft hyphen, i.e., U+00AD: SOFT HYPHEN. For example,

­是软连字符，即 U+00AD：软连字符。例如，

inneh?lls­f?rteckning

might be rendered as

可能被渲染为

inneh?llsf?rteckning

or as

或作为

inneh?lls-
f?rteckning

As of today, soft hyphens work in Firefox, Chrome, and Internet Explorer.

截至今天，软连字符可在 Firefox、Chrome 和 Internet Explorer 中使用。

The wbrelement

该wbr元素

The wbrelementis a word-break opportunity, which will not display a hyphen if a line break occurs. For example,

该wbr元素是一个断字机会，如果发生换行，则不会显示连字符。例如，

ABCDEFG<wbr/>abcdefg

might be rendered as

可能被渲染为

ABCDEFGabcdefg

or as

或作为

ABCDEFG
abcdefg

As of today, this element works in Firefox and Chrome.

截至今天，此元素适用于 Firefox 和 Chrome。

回答by AVL geek

The zero-width spaceentity can be used in place of <wbr>tag reliably on virtually every platform.

在零宽度空间实体可以代替使用<wbr>标签上可靠地几乎每一个平台。

​

Also useful is the word joinerentity, that can be used to prohibit a break. (Insert between each character of a word, except where you want the break.)

同样有用的是joinerentity这个词，它可以用来禁止中断。（在单词的每个字符之间插入，除非您想要中断。）

⁠

With the two of these, you can do anything.

有了这两个，你可以做任何事情。

回答by Weijing Jay Lin

I suggest using wbr, so the code can be written like this:

我建议使用wbr，所以代码可以这样写：

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

It won't lead space between charaters, while ­won't stop spaces created by line breaks.

它不会在字符之间引入空格，­也不会停止由换行符产生的空格。

回答by anthonyv

This is a crossbrowser solution that I was looking at a little while ago that runs on the client and using jQuery:

这是我不久前看到的一个跨浏览器解决方案，它在客户端上运行并使用 jQuery：

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery); 

回答by dmitry_romanov

I used soft hyphen unicode charactersuccessfully in few desktop and mobile browsers to solve the issue.

我在少数桌面和移动浏览器中成功使用软连字符 unicode 字符来解决该问题。

The unicode symbol is \u00ADand is pretty easy to insert into Python unicode string like s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

unicode 符号\u00AD很容易插入到 Python unicode 字符串中，如s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Other solution is to insert the unicode char itself, and the source string will look perfectly ordinary in editors like Sublime Text, Kate, Geany, etc (cursor will feel the invisible symbol though).

其他解决方案是插入 unicode 字符本身，源字符串在 Sublime Text、Kate、Geany 等编辑器中看起来非常普通（尽管光标会感觉到不可见的符号）。

Hex editors of in-house tools can automate this task easily.

内部工具的十六进制编辑器可以轻松地自动执行此任务。

An easy kludge is to use rare and visible character, like |, which is easy to copy and paste, and replace it on soft hyphen using, e.g. frontend script in $(document).ready(...). Source code like s = u'Языки и методы про|гра|м|ми|ро|ва|ния'.replace('|', u'\u00AD')is easier to read than s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

一个简单的方法是使用罕见且可见的字符，例如|，它易于复制和粘贴，并使用软连字符替换它，例如$(document).ready(...). 源代码 likes = u'Языки и методы про|гра|м|ми|ро|ва|ния'.replace('|', u'\u00AD')比s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

回答by Jaap D

If you have bad luck and still has to use JSF 1, then the only solution is to use &#173;, &shy; does not work.

如果你运气不好，仍然必须使用 JSF 1，那么唯一的解决方案是使用 ­, ­ 不起作用。