HTML 中的软连字符(<wbr> 与 ­)

新手上路,请多包涵

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

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

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


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

原文由 Pontus 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 463
2 个回答

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

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

2013 年编辑: 根据 QuirksMode&shy; 现在可以在所有主要浏览器上运行/受支持。

原文由 Marco 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

它们都表现得很好, &#173; 边缘它因为谷歌仍然可以索引包含它的单词。

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

测试一下

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

  • &shy; - confumbabbl&shy;ication&shy;ism - 混淆论
    • …………………………………………….. …………………………………………….. ……….混淆论
    • …………………………………………….. …………………………………………….. ……………混淆论

<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; 成功
  • 边缘(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; 失败 Word(全部粘贴为连字符),在其他应用中成功
  • IE10 (Win7): &shy; 粘贴所有连字符 失败,--- <wbr> 失败&#173; 粘贴所有连字符 失败
  • IE8 (Win7): &shy; 失败 粘贴为连字符, <wbr> 失败&#173; 失败 粘贴为连字符
  • IE7 (Win7): &shy; 全部粘贴为连字符 失败,--- <wbr> 失败&#173; 全部粘贴为连字符 失败

搜索引擎匹配

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

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

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

  • 谷歌: &shy; 失败, &#173; 成功
  • Bing: &shy; 失败, &#173; 失败
  • Baidu: &shy; fails, &#173; fails (can match fragments within longer strings but not the words on their own containing a &#173; or &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; 仅当两者都包含害羞连字符时才匹配 失败

原文由 user56reinstatemonica8 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏