HTML中的软连字符(<wbr>与&shy;)


154

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

根据本页 <wbr>上的评论,是一种非标准的“ Netscape发明的标签汤”。似乎&shy; 在标准合规性方面也存在问题。似乎没有办法为所有浏览器获得有效的解决方案

您使用哪种方式处理软连字符,为什么选择它?有没有首选的解决方案或最佳做法?


在此处 查看相关的SO讨论。


很抱歉提前关闭-这很接近,但是彼此之间不太一样。虽然要离开链接。
克里斯·玛拉斯蒂·乔治

2
请注意,这<wbr>根本不是连字符。
Andreas Rejbrand

对于测试浏览器:jsfiddle.net/k2hbrjz8/2要么&#173; 或&shy; 似乎可以根据需要进行显示和复制/粘贴。<wbr>仅在双击时选择单词的一半。搜索可查找当前Firefox中的所有内容(截至本评论发表之日)。如果&#173; 更好地索引,使用它。
karmakaze

Answers:


132

不幸的是,各&shy浏览器之间对的支持不一致,以致于不能真正使用它。

QuirksMode是正确的-目前尚无在HTML中使用软连字符的好方法。看看没有他们该怎么办。

2013编辑:根据QuirksMode&shy;现在在所有主流浏览器上均可使用/受支持。


11
不幸的是,事实并非如此。尝试在浏览器中搜索包含软连字符的单词。大多数浏览器将其视为两个单独的单词,而不是简单地忽略软连字符。
gclj5

3
@ gclj5我刚刚测试过&shy;在Chrome v21中找到一个单词,它正确地忽略了软连字符。虽然不确定IE,FF和其他浏览器。
evanrmurphy 2012年

6
在最近的FF,Chrome和Safari中,它可以正常工作(即可以搜索单词)。
MMM

10
但是用&shy;复制文本。在Chrome中返回带有破折号的文本。示例:“ uni&shy; later&shy; al”。复制为“以后”。
Enyby 2014年

2
今天,&shy;由于Webkit中的特定错误(影响Safari,Safari iOS和Chrome最新版本)导致使用大量自定义字体(免费和商业字体)的怪异字符渲染,我们不得不放弃使用量
Nico Pernice

58

2015年2月摘要(部分更新于2017年11月)

它们的性能都非常好,&#173;因为Google仍然可以索引包含它的单词,所以使其处于优势地位。

  • 在浏览器: &shy;&#173;预期都显示在主流浏览器(甚至是旧IE!)。<wbr>在IE的最新版本(10或11)中不受支持,并且在Edge中无法正常工作。
  • 当复制并粘贴到浏览器:(2015年测试)的预期&shy;&#173;对Chrome和Firefox在Mac,Windows上(10),它使字符和粘贴硬连字符到记事本和无形的软连字符到支持他们的应用程序。IE(win7)始终粘贴连字符,即使在IE10中也是如此,而Safari(Mac)副本的粘贴方式是在某些应用程序(例如MS Word)中粘贴为连字符
  • 在网页查找适用于所有浏览器,&shy;并且适用&#173;于所有浏览器,但IE仅匹配完全匹配的复制粘贴内容(甚至不超过IE11)
  • 搜索引擎: Google将包含&#173;的单词与正常键入的单词匹配。截至2017年,似乎不再匹配包含的单词&shy;。Yandex也是如此。必应和百度似乎都不匹配。

测试一下

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

  • &shy;- confumbabbl&shy;ication&shy;ism- confumbabblicationism
    • ................................................... ................................................... ..... confumbabbationationism
    • ................................................... ................................................... .............. confubbabbationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism。该站点<wbr/>将从输出中删除。这是用于测试jsbin.com代码段

  • &#173;- eonfulbabbl&#173;ication&#173;ism- eonfulbabblicationism
    • ................................................... ................................................... .............完美的复制论
    • ................................................... ................................................... ................新的夸张主义

在这里,它们没有害羞的连字符(这是用于复制和粘贴到页面查找测试中;以不会破坏搜索引擎测试的方式编写):

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;成功

跨浏览器复制粘贴

成功:复制并粘贴整个单词,不加连字符。(在粘贴到浏览器搜索,MS Word 2011和Sublime Text的Mac上进行了测试)

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

  • 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月更新。<wbr>未经测试,因为StackOverflow的CMS删除了它。

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

失败:搜索引擎仅在搜索单词或带连字符的断句时才能找到此页面。

  • Google:&shy;失败,&#173;成功
  • 必应:&shy;失败,&#173;失败
  • 百度:&shy;失败,&#173;失败(可以匹配较长字符串中的片段,但不能匹配包含a &#173;或的单词本身&shy;
  • Yandex:&shy;失败,&#173;成功(尽管有可能匹配像百度这样的字符串片段,但并非100%肯定)

跨浏览器在页面上查找

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

  • 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; 不能只匹配时,都含有害羞的连字符,<wbr>成功,&#173; 失败,只有当两者都含有害羞的连字符相匹配
  • IE8(Win7的):&shy; 不能只匹配时,都含有害羞的连字符,<wbr>成功,&#173; 失败,只有当两者都含有害羞的连字符相匹配
  • IE7(Win7的):&shy; 不能只匹配时,都含有害羞的连字符,<wbr>成功,&#173; 失败,只有当两者都含有害羞的连字符相匹配

今天,<wbr/>可以在Firefox和Chrome中使用。(而且,老实说,我怀疑它甚至在2月份也是如此,至少在Windows上是。)
Andreas Rejbrand 2015年

1
我正在Windows 7上使用最新版本的Chrome和Firefox,并且<wbr/>两者均可工作。请注意,发生中断时,不应为该<wbr>元素添加连字符。换句话说,<wbr/>&shy; 应该做同样的事情
Andreas Rejbrand 2015年

嗯,看着它,看起来SE的CMS已将<wbr/>s从最终标记中删除,同时将它们保留在源代码中。该死的SE!将会编辑..
user56reinstatemonica8'5

奇怪,无法重现该“错误”。
Andreas Rejbrand,2015年

测试&shy;和有什么意义&#173;吗?一旦到达DOM,它们实际上是相同的。只有在HTML标记器中,它们才完全不同。
gsnedders

32

目前正在努力使CSS3中的连字标准化

一些现代的浏览器,尤其是Safari和Firefox,已经支持此功能。这是有关浏览器支持的良好且最新的参考

一旦CSS连字被普遍实现,那将是最好的解决方案。同时,我可以推荐Hyphenator-一个JS脚本,该脚本说明了如何以最适合特定浏览器的方式对文本进行断字

连字符:

  • 依赖于通常在LaTeX和OpenOffice中众所周知的Franklin M. Liangs连字算法
  • 在可用的地方使用CSS3连字号,
  • 自动插入&shy;大多数其他浏览器,
  • 支持多种语言,
  • 高度可配置
  • 如果未启用javascript,则会正常返回。

我已经用过了,效果很好!


Firefox支持该属性,但应用后不执行任何操作
bob0the0mighty 2015年

我错了,Firefox确实可以工作,但是您必须在html标记中包含一个lang类型。
bob0the0mighty 2015年

Hyphenator脚本似乎不再被维护,但是可以从同一作者那里获得一个新版本:github.com/mnater/Hyphenopoly
MattFisch

20

我使用&shy;,在需要时手动插入。

我总是感到遗憾的是,人们没有使用技术,因为有些浏览器(可能是古老的或奇怪的)浏览器无法按照指定的方式处理它们。我发现&shy;在最近的Internet Explorer和Firefox浏览器中都可以正常工作,这足够了。您可能会包含浏览器检查,告诉人们使用某些成熟的工具,或者如果他们使用某些奇怪的浏览器,后果自负。

音节化并不是那么容易,我不建议您将其留给Javascript。这是一个特定于语言的主题,如果您不希望它使您的文字令人讨厌,那么主持人可能需要对其进行仔细地修改。某些语言(例如德语)形成复合词,并可能导致分解问题。例如,根据音节规则,可以将细菌Spargelder(节省的钱等)包装在两个位置()。然而,在第二位置它包裹,使第一部分显示为(胚芽。芦笋),激活在读取器的头部的完全误导概念并且因此768,16被避免。Spar-gel-derSpargel-

那字符串Wachstube呢?它可能表示“警卫室”(Wach-stu-be)或“蜡管”(Wachs-tu-be)。您可能还会找到其他语言的其他示例。您应该致力于提供一个环境,在这个环境中可以帮助桌面服务员创建清晰易懂的文本,并校对每个关键单词。


6
Spar-gelder vs. Spargel-der的英语常见示例是“ re-cord”和“ rec-ord”(单音符号但不是同音字)。前者是动词,后者是名词。算法通常不够智能,即使是英语(IT方面受支持最好的语言之一)也是如此。
Nicholas Shanks

38
我建议专家交换与专家交换
CJ Dennis

13

请注意,从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中使用。


4

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

&#8203;

连接器实体这个也很有用,可以用来禁止中断。(在单词的每个字符之间插入,除非您要在其中分隔。)

&#8288;

有了这两个,您可以做任何事情。


1
零宽度空间(ZWSP,U + 200B,&#8203;)确实是这样<wbr>做的(iirc;已经有一段时间了),但得到了更好的支持(今天普遍如此)。这正是我一直在寻找的,因为它不是一个连字符添加到破裂的话,允许时通过运行如逗号分隔值包装s/,/,\&#8203;/g更换。
亚当·卡兹

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

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

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

它不会在字符之间导致空格,而&shy;不会停止由换行符创建的空格。


2

我在少数台式机和移动浏览器中成功使用了软连字符unicode字符来解决此问题。

unicode符号\u00AD相当容易插入Python unicode字符串(如)s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'

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

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

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



0

如果运气不好并且仍然必须使用JSF 1,那么唯一的解决方案是使用&#173 ;、&shy;。不起作用。


0

<wbr>和&shy;

今天,您可以同时使用两者。

<wbr>用于中断并且不放置更多信息。

示例,用于显示链接:

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-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 quejá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;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>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.