HTML中的软连字符( vs.)

Question

HTML中的软连字符( vs.)

Pon*_*tus 148 html text soft-hyphen wbr

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

根据这个页面 上的评论是由Netscape发明的非标准"标签汤".它似乎 也存在标准合规性方面的问题.似乎没有办法为所有浏览器提供有效的解决方案.

处理软连字符的方法是什么？为什么选择它？有优选的解决方案还是最佳实践？

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

Answer 1

Mar*_*rco 127

~~不幸的是,&shy浏览器之间的支持是如此不一致,以至于它无法真正被使用.~~

~~QuirksMode是对的 - 现在没有好的方法在HTML中使用软连字符.看看没有它们你能做些什么.~~

2013编辑:根据QuirksMode,现在所有主流浏览器都支持.

实际上,这些天,98%的案件中都是害羞的. (18认同)
不幸的是,事实并非如此.尝试在浏览器中搜索包含软连字符的单词.大多数浏览器将其视为两个单独的单词,而不是简单地忽略软连字符. (10认同)
但是用&shy复制文本; 在Chrome中使用短划线返回文字.示例:"uni later al." 复制为"uni-later-al." (9认同)
在最近的FF,Chrome和Safari中,它可以正常工作(即可搜索单词). (5认同)
@ gclj5我刚刚测试了Chrome v21中的`'字,它正确地忽略了软连字符.虽然不确定IE,FF和其他浏览器. (3认同)
今天,由于Webkit中的特定错误(影响Safari,Safari iOS和Chrome最新版本),我们不得不放弃``````使用,导致使用大量自定义字体(免费和商业字体)渲染奇怪的字符 (2认同)

Answer 2

use*_*ca8 50

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

他们都表现得相当不错,因为Google仍然可以对包含它的单词进行索引.

在浏览器中: 并且两者都在主要浏览器中显示(即使是旧的IE!).IE(10或11)的最新版本不支持,并且在Edge中无法正常工作.
当复制并粘贴到浏览器:(2015年测试)的预期和对Chrome和Firefox在Mac,Windows上(10),它使字符和粘贴硬连字符到记事本和无形的软连字符到支持他们的应用程序.IE(win7)总是粘贴连字符,即使在IE10中,Safari(Mac)也会以某些应用程序(例如MS Word)中的连字符形式粘贴,而不是其他
查找页作品和上除了IE以外所有浏览器只匹配精确复制和粘贴的比赛(甚至高达IE11)
搜索引擎: Google会匹配包含正常输入字词的字词.截至2017年,它似乎不再匹配包含的单词.Yandex看起来是一样的.Bing和百度似乎都不匹配.

测试一下

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

- confumbabblicationism- 混乱主义
- .................................................. .................................................. .......... confumbabblicationism
- .................................................. .................................................. .............. confumbabblicationism

- donfounbabblicationism.此站点从输出中删除.这是一个用于测试的jsbin.com代码段.

- eonfulbabblicationism- eonfulbabblicationism
- .................................................. .................................................. ............. eonfulbabblicationism
- .................................................. .................................................. ................ eonfulbabblicationism

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

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

跨浏览器显示

成功:显示为正常单词,除非它应该断开,当它在指定位置断开和连字符时.

失败:异常显示或未在预定位置中断.

Chrome(40.0.2214.115,Mac):成功,成功,成功
Firefox(35.0.1,Mac): 成功,成功,成功
Safari(6.1.2,Mac): 成功, 尚未测试,成功
Edge(Windows 10):成功, 失败(中断但没有连字符),成功
IE11(Windows 10):成功, 失败(没有休息),成功
IE10(Windows 10):成功, 失败(没有休息),成功
IE8(Windows 7):不稳定 - 有时,它们都没有工作,它们都只是跟随css word-wrap.有时,它们似乎都有效.尚未找到任何明确的原因.
IE7(Windows 7):成功,成功,成功

跨浏览器复制粘贴

成功:复制和粘贴整个单词,没有连字.(在Mac上测试粘贴到浏览器搜索,MS Word 2011和Sublime Text)

失败:用连字符,空格,换行符或垃圾字符粘贴.

Chrome(40.0.2214.115,Mac):成功,成功,成功
Firefox(35.0.1,Mac): 成功,成功,成功
Safari(6.1.2,Mac):  无法进入MS Word(粘贴所有连字符),其他应用程序成功 失败, 无法进入MS Word(全部粘贴为连字符),其他应用程序成功
IE10(Win7): 失败粘贴所有连字符, 失败, 失败粘贴所有连字符
IE8(Win7): 失败粘贴所有连字符, 失败, 失败粘贴所有连字符
IE7(Win7): 失败粘贴所有连字符, 失败, 失败粘贴所有连字符

搜索引擎匹配

在2017年11月更新.未经测试,因为StackOverflow的CMS剥离了它.

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

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

谷歌:失败,成功
Bing:失败,失败
百度:失败,失败(可以匹配较长字符串中的片段但不包含自己包含的字词或者)
Yandex:失败,成功(虽然它可能匹配像百度一样的字符串片段,但不是100%肯定)

在浏览器的页面上查找

搜索引擎匹配的成功与失败.

Chrome(40.0.2214.115,Mac):成功,成功,成功
Firefox(35.0.1,Mac): 成功,成功,成功
Safari(6.1.2,Mac): 成功,成功,成功
IE10(Win7的): 失败时都包含害羞连字符,只匹配成功, 失败只匹配时,都含有羞涩连字符.
IE8(Win7的): 失败时都包含害羞连字符,只匹配成功, 失败只匹配时,都含有羞涩连字符.
IE7(Win7的): 失败时都包含害羞连字符,只匹配成功, 失败只匹配时,都含有羞涩连字符.

我在 Windows 7 上使用最新版本的 Chrome 和 Firefox，并且“”适用于这两种版本。请注意，发生中断时，“”元素**不应添加连字符**。换句话说，“”和“”[**不**应该做同样的事情](http://stackoverflow.com/a/29720524/282848)。 (3认同)
测试“”和“”有什么意义吗？一旦它们到达 DOM，它们就“实际上是相同的”；只是在 HTML 分词器中它们完全不同。 (2认同)

Answer 3

Dom*_*nik 30

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

一些现代浏览器,特别是Safari和Firefox,已经支持这一点.这是一个关于浏览器支持的最新参考.

一旦CSS连字普遍实现,那将是最好的解决方案.在此期间,我可以推荐连字符 -一个JS脚本,计算出如何使用连字符以最适合特定浏览器的方式文本.

连字符:

依赖于Franklin M. Liangs连字算法,俗称LaTeX和OpenOffice.
在可用的地方使用CSS3连字符,
自动插入大多数其他浏览器,
支持多种语言,
高度可配置,
优雅地回退以防javascript未启用.

我用过它,效果很好!

Answer 4

Mat*_*nge 20

我使用,必要时手动插入.

我总是觉得很遗憾人们不使用技术,因为有一些 - 可能是旧的或奇怪的 - 浏览器周围没有按照指定的方式处理它们.我发现它在最近的Internet Explorer和Firefox浏览器中都能正常工作,这应该足够了.您可以包含一个浏览器检查,告诉人们使用成熟的东西,或者如果他们遇到一些奇怪的浏览器,他们将自行承担风险.

音译不是那么容易,我不建议把它留给一些Javascript.这是一个特定于语言的主题,如果你不想让你的文字变得烦躁,可能需要由服务员仔细修改.某些语言(如德语)会形成复合词,并可能导致分解问题.例如Spargelder(胚芽,省钱,pl.)可以通过音节规则包裹在两个地方(Spar-gel-der).然而,将它包裹在第二个位置,将第一个部分转换为Spargel-(胚芽.芦笋),在阅读器的头部激活一个完全误导的概念,因此应该避免.

那串Wachstube呢？它可能意味着'guardroom'(Wach-stu-be)或'tube of wax'(Wachs-tu-be).您可能也会在其他语言中找到其他示例.您应该致力于提供一个环境,在这个环境中,可以支持桌面工作者创建一个完整的文本,并对每个关键词进行校对.