如何在HTML中实现软连字符

179
如何解决网页上的软连字符问题?在文本中,可能会出现长单词,我可能希望使用连字符进行换行,但如果整个单词在同一行上,我不希望连字符显示出来。我听说过&shy;<wbr>
根据此页面上的评论,<wbr>是一个非标准的“由Netscape发明的标签混乱”。看起来&shy;在符合标准方面存在问题
如何在HTML中使用软连字符以在所有浏览器中正常工作?

抱歉提前关闭 - 这个很接近,但不完全和另一个一样。我会留下链接的。 - Chris Marasti-Georg
2
请注意,<wbr>根本不应该是连字符。 - Andreas Rejbrand
用于测试浏览器:https://jsfiddle.net/k2hbrjz8/2/ 无论是 ­ 还是 ­ 都可以按照预期进行显示和复制/粘贴。当双击时,<wbr> 只选择单词的一半。在当前 Firefox 中搜索(截至本评论日期)可以找到所有内容。如果 ­ 索引更好,请使用它。 - karmakaze
13个回答

150
根据QuirksMode的说法,所有主流浏览器都支持&shy;标签。

11
很遗憾,它不起作用。尝试在浏览器中搜索一个包含软连字号的单词。大多数浏览器将其视为两个单独的单词,而不是简单地忽略软连字号。 - gclj5
4
我刚在 Chrome v21 上测试了对 &shy; 单词的查找,它正确地忽略了软连字符。不过我不确定 IE、FF 和其他浏览器是否也是这样。 - evanrmurphy
7
近期的Firefox、Chrome和Safari中都可以正常使用(即可搜索单词)。 - MMM
10
使用Chrome复制带有 ­ 的文本会返回带有破折号的文本,例如:"uni­later­al." 复制后变成 "uni-­later­-al." - Enyby
2
今天我们不得不放弃使用&shy;,因为在Webkit中存在特定的错误(影响Safari、Safari iOS和Chrome最新版本),导致大量自定义字体(包括免费和商业字体)呈现出奇怪的字符。 - Giulia Nicola Pernice
显示剩余2条评论

86
它们都表现得相当不错,但是谷歌仍然可以索引包含它的单词,所以它稍微领先一些。
  • 在浏览器中: &shy;&#173; 在主要浏览器中都能正常显示(即使是旧版的IE!)。<wbr> 在最新版本的IE(10或11)中不受支持,并且在Edge中无法正常工作。
  • 从浏览器中复制和粘贴:(测试于2015年)在Mac上的Chrome和Firefox中,&shy;&#173; 的表现如预期,而在Windows(10)上,它会保留字符并将硬连字符粘贴到记事本中,并将不可见的软连字符粘贴到支持它们的应用程序中。IE(win7)始终使用连字符进行粘贴,即使在IE10中也是如此,而Safari(Mac)则以一种方式复制,可以在某些应用程序(例如MS Word)中粘贴为连字符,但在其他应用程序中则不会。
  • 页面内查找 对于除IE外的所有浏览器,&shy;&#173; 都能正常工作,而IE只能匹配精确复制和粘贴的内容(即使是到IE11)
  • 搜索引擎: Google会匹配包含&#173;的单词和正常输入的单词。截至2017年,它似乎不再匹配包含&shy;的单词。Yandex似乎也是如此。Bing和Baidu似乎都不匹配。

测试一下

为了进行最新的实时测试,这里有一些带有软连字符的独特单词的例子。

  • &shy; - confumbabbl&shy;ication&shy;ism - confumbabbl­ication­ism
    • ..............................................................................................................confumbabbl­ication­ism
    • ..................................................................................................................confumbabbl­ication­ism

<wbr> - donfounbabbl<wbr>ication<wbr>ism。此网站会从输出中删除<wbr/>。这里有一个用于测试的jsbin.com代码片段

  • &#173; - eonfulbabbl&#173;ication&#173;ism - eonfulbabbl­ication­ism
    • .................................................................................................................eonfulbabbl­ication­ism
    • ....................................................................................................................eonfulbabbl­ication­ism

这里是没有害羞连字符的版本(这是为了复制和粘贴到页面测试中使用的;以一种不会破坏搜索引擎测试的方式编写):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

在不同浏览器中显示

成功:以正常单词的形式显示,除非需要换行,当需要换行时,在指定的位置断开并连字符化。

失败:显示异常,或者无法在预期位置换行。

Chrome (40.0.2214.115, Mac): &shy; 成功, <wbr> 成功, &#173; 成功 Firefox (35.0.1, Mac): &shy; 成功, <wbr> 成功, &#173; 成功 Safari (6.1.2, Mac): &shy; 成功, <wbr> 尚未测试, &#173; 成功 Edge (Windows 10): &shy; 成功, <wbr> 失败 (换行但没有连字符), &#173; 成功 IE11 (Windows 10): &shy; 成功, <wbr> 失败 (没有换行), &#173; 成功 IE10 (Windows 10): &shy; 成功, <wbr> 失败 (没有换行), &#173; 成功 IE8 (Windows 7): 不稳定 - 有时候,它们都不起作用,只是遵循css的word-wrap。有时候,它们似乎都起作用。尚未找到任何明确的模式。 IE7 (Windows 7): &shy; 成功, <wbr> 成功, &#173; 成功

在浏览器间复制粘贴

成功:复制和粘贴整个单词,不带连字符。(在Mac上测试过,粘贴到浏览器搜索框、MS Word 2011和Sublime Text中)

失败:粘贴时带有连字符、空格、换行符或垃圾字符。

Chrome (40.0.2214.115, Mac): &shy; 成功,<wbr> 成功,&#173; 成功 Firefox (35.0.1, Mac): &shy; 成功,<wbr> 成功,&#173; 成功 Safari (6.1.2, Mac): &shy; 失败 在MS Word中(粘贴为连字符),在其他应用程序中成功 <wbr> 失败&#173; 失败 在MS Word中(粘贴为连字符),在其他应用程序中成功 IE10 (Win7): &shy; 失败 粘贴为连字符,<wbr> 失败&#173; 失败 粘贴为连字符 IE8 (Win7): &shy; 失败 粘贴为连字符,<wbr> 失败&#173; 失败 粘贴为连字符 IE7 (Win7): &shy; 失败 粘贴为连字符,<wbr> 失败&#173; 失败 粘贴为连字符

搜索引擎匹配

更新于2017年11月。由于StackOverflow的CMS剥离了它,因此未测试<wbr>

成功:搜索整个非连字符单词可以找到此页面。

失败:搜索引擎只能在搜索断开的单词片段或带连字符的单词时找到此页面。

  • 谷歌: &shy; 失败,&#173; 成功
  • 必应: &shy; 失败,&#173; 失败
  • 百度: &shy; 失败,&#173; 失败(可以匹配较长字符串中的片段,但不能匹配包含&#173;&shy;的单独单词)
  • Yandex: &shy; 失败,&#173; 成功(尽管可能像百度一样匹配字符串片段,但不能百分之百确定)

跨浏览器在页面上查找

成功和失败就像搜索引擎的匹配一样。
Chrome (40.0.2214.115, Mac): &shy; 成功,<wbr> 成功,&#173; 成功 Firefox (35.0.1, Mac): &shy; 成功,<wbr> 成功,&#173; 成功 Safari (6.1.2, Mac): &shy; 成功,<wbr> 成功,&#173; 成功 IE10 (Win7): &shy; 失败 只有在两者都包含 shy 连字符时才匹配,<wbr> 成功,&#173; 失败 只有在两者都包含 shy 连字符时才匹配 IE8 (Win7): &shy; 失败 只有在两者都包含 shy 连字符时才匹配,<wbr> 成功,&#173; 失败 只有在两者都包含 shy 连字符时才匹配 IE7 (Win7): &shy; 失败 只有在两者都包含 shy 连字符时才匹配,<wbr> 成功,&#173; 失败 只有在两者都包含 shy 连字符时才匹配

3
我在Windows 7上使用最新版本的Chrome和Firefox,<wbr/>在两者中都可以工作。请注意,当出现换行时,<wbr>元素不应该添加连字符。换句话说,<wbr/>&shy;不应该做同样的事情 - Andreas Rejbrand
看起来 SE 的 CMS 已经从最终的标记中删除了 <wbr/>,但是在源代码中保留了它们。该死的 SE!我会进行编辑。 - user56reinstatemonica8
奇怪,无法重现那个“错误”。 - Andreas Rejbrand
2
测试 &shy;&#173; 有意义吗?一旦它们到达 DOM,它们就是完全相同的;只有在 HTML 分词器中它们才有所不同。 - gsnedders
1
仅供参考:根据_caniuse_,IE自版本8起不再支持<wbr>标签:http://caniuse.com/#feat=wbr-element。但最好进行一些实际测试,特别是对于IE 11。 - Dennis98
显示剩余2条评论

34

目前正在进行努力,以在CSS3中标准化连字

一些现代浏览器,特别是Safari和Firefox已经支持了此功能。这里提供一个好的并且最新的浏览器支持参考文献

CSS连字一旦得到普及实施,那将是最好的解决方案。与此同时,我可以推荐使用Hyphenator - 这是一个JS脚本,用于确定如何对文本进行连字划分,以适合特定的浏览器。

Hyphenator:

  • 依赖于Franklin M. Liang的连字算法,通常用于LaTeX和OpenOffice。
  • 在CSS3连字可用时使用CSS3连字,
  • 在大多数其他浏览器上自动插入&shy;
  • 支持多种语言,
  • 高度可配置,
  • 在未启用javascript时,优雅地回退。

我已经使用过它,效果很好!


Firefox支持该属性,但应用时不起作用。 - bob0the0mighty
我错了,Firefox确实可以工作,但你必须在你的HTML标签中包含语言类型。 - bob0the0mighty
Hyphenator脚本似乎已经不再维护,但是同一作者在这里提供了一个新版本:https://github.com/mnater/Hyphenopoly - MattFisch

22

我手动添加 &shy;,在必要的地方。

我常常觉得可惜,因为有些可能是古老或奇怪的浏览器不能像它们规定的那样处理技术,所以人们不使用这些技术。 我发现 &shy; 在最近的Internet Explorer和Firefox浏览器中都可以正常工作,那应该足够了。 如果用户使用一些奇怪的浏览器,您可以包含一个浏览器检查,告诉他们使用成熟的浏览器或自担风险。

断音并不容易,我不建议将其留给一些Javascript。 这是一个特定于语言的主题,如果你不想让它变得令人不爽,可能需要由编辑仔细修订。有些语言,例如德语,形成复合词,可能会导致分解问题。 例如,Spargeldergerm。 储蓄的钱,复数)根据断音规则可能被分成两个部分(Spar-gel-der)。 但是,在第二个位置上包裹它会使第一部分显示为Spargel-germ。 芦笋),激活读者头脑中完全误导的概念,因此应避免。

那么字符串 Wachstube 呢?它可以是“警卫室”(Wach-stu-be),也可以是“蜡管”(Wachs-tu-be)。您可能在其他语言中还能找到其他例子。 你应该提供一个环境,支持编辑仔细地校对每个关键词,以创建一个良好的分音文本。


7
英语中Spar-gelder和Spargel-der的常见例子是“re-cord”和“rec-ord”(同形异义词但不是同音异义词)。前者是动词,后者是名词。即使在英语中(IT中最受支持的语言之一),算法通常也不足够智能化来处理这种情况。 - Nicholas Shanks
46
我建议使用Experts-Exchange而不是Expert-Sexchange。 - CJ Dennis

20

非常重要的一点是,在 HTML5 中,<wbr>&shy; 并不是用来做同样的事情

软连字符

&shy; 是软连字符,即 U+00AD:SOFT HYPHEN。例如,

innehålls&shy;förteckning

可能会被呈现为

innehållsförteckning
或作为
innehålls-
förteckning

截至今日,在Firefox,Chrome和Internet Explorer中,软连字符已经生效。

wbr元素

wbr元素是一个单词断点,如果出现换行,将不显示连字符。例如:

ABCDEFG<wbr/>abcdefg

可能会呈现为

ABCDEFGabcdefg

或者作为

ABCDEFG
abcdefg

截至今天,此元素可在Firefox和Chrome中使用。


5

零宽度空格实体可以可靠地替代<wbr>标记,在几乎所有平台上使用。

&#8203;

此外,单词连接器实体也非常有用,它可以用于禁止断行。(在单词的每个字符之间插入,除非您想要断行。)
&#8288;

有了这两个工具,你可以做任何事情。


2
零宽空格(ZWSP,U+200B,&#8203;)正是 <wbr> 所做的事情(如果我没记错的话;现在更好地支持)。这正是我正在寻找的,因为它不会在断开的单词中添加连字符,允许例如逗号分隔值在通过 s /,/,\&#8203;/g 替换时换行。 - Adam Katz

2

我建议使用wbr,这样代码可以像这样编写:

<p>这里有一段很长,很长的<wbr
></wbr>文字;这里有一段</p>

它不会在字符之间产生空格,而&shy;无法阻止由换行符创建的空格。

2
这是一个我不久前看到的跨浏览器解决方案,运行在客户端并使用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); 

2

我在几个桌面和移动浏览器中成功地使用了软连字符Unicode字符来解决问题。

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

另一个解决方案是直接插入Unicode字符本身,在像Sublime Text、Kate、Geany等编辑器中,源字符串看起来非常普通(光标会感觉到不可见的符号)。

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

一个简单的方法是使用罕见且可见的字符,如¦,它很容易复制和粘贴,并使用前端脚本在$(document).ready(...)中将其替换为软连字符。像s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')这样的源代码比s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'更易于阅读。


0

<wbr> 和 &shy;

今天你可以同时使用它们。

<wbr> 用于断字,但不会放置更多信息。

例如,用于显示链接:

 https://dev59.com/g3VC5IYBdhLWcg3wpS3f

&shy; 在必要时使用,此时文本将断开并添加连字符。

例如:

"É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be."

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}
<div>https://<wbr>stackoverflow.com<wbr>/questions/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接