如何解决网页上的软连字符问题?在文本中可能有一些长词,您可能想要用连字符换行.但是你不希望连字符显示整个单词是否在同一行.
根据这个页面
上的评论是由Netscape发明的非标准"标签汤".它似乎
也存在标准合规性方面的问题.似乎没有办法为所有浏览器提供有效的解决方案.
处理软连字符的方法是什么?为什么选择它?有优选的解决方案还是最佳实践?
不幸的是,­
浏览器之间的支持是如此不一致,以至于它无法真正被使用.
QuirksMode是对的 - 现在没有好的方法在HTML中使用软连字符.看看没有它们你能做些什么.
2013编辑:根据QuirksMode,
现在所有主流浏览器都支持.
他们都表现得相当不错,
因为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
- donfounbabbl
.此站点
从输出中删除.这是一个用于测试的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的):
失败时都包含害羞连字符,只匹配
成功,
失败只匹配时,都含有羞涩连字符.
目前正在努力使CSS3中的连字标准化.
一些现代浏览器,特别是Safari和Firefox,已经支持这一点.这是一个关于浏览器支持的最新参考.
一旦CSS连字普遍实现,那将是最好的解决方案.在此期间,我可以推荐连字符 -一个JS脚本,计算出如何使用连字符以最适合特定浏览器的方式文本.
连字符:
依赖于Franklin M. Liangs连字算法,俗称LaTeX和OpenOffice.
在可用的地方使用CSS3连字符,
自动插入
大多数其他浏览器,
支持多种语言,
高度可配置,
优雅地回退以防javascript未启用.
我用过它,效果很好!
我使用
,必要时手动插入.
我总是觉得很遗憾人们不使用技术,因为有一些 - 可能是旧的或奇怪的 - 浏览器周围没有按照指定的方式处理它们.我发现它
在最近的Internet Explorer和Firefox浏览器中都能正常工作,这应该足够了.您可以包含一个浏览器检查,告诉人们使用成熟的东西,或者如果他们遇到一些奇怪的浏览器,他们将自行承担风险.
音译不是那么容易,我不建议把它留给一些Javascript.这是一个特定于语言的主题,如果你不想让你的文字变得烦躁,可能需要由服务员仔细修改.某些语言(如德语)会形成复合词,并可能导致分解问题.例如Spargelder
(胚芽,省钱,pl.)可以通过音节规则包裹在两个地方(Spar-gel-der
).然而,将它包裹在第二个位置,将第一个部分转换为Spargel-
(胚芽.芦笋),在阅读器的头部激活一个完全误导的概念,因此应该避免.
那串Wachstube
呢?它可能意味着'guardroom'(Wach-stu-be
)或'tube of wax'(Wachs-tu-be
).您可能也会在其他语言中找到其他示例.您应该致力于提供一个环境,在这个环境中,可以支持桌面工作者创建一个完整的文本,并对每个关键词进行校对.
这是发现很重要,因为HTML5的,
和
不应该做同样的事情!
软连字符
是一个软连字符,即U + 00AD:SOFT HYPHEN.例如,
innehållsförteckning
可能会呈现为
innehållsförteckning
或者作为
innehålls- förteckning
截至今天,软连字符适用于Firefox,Chrome和Internet Explorer.
该wbr
元素
所述wbr
元件是一个字断的机会,如果发生断线,不会显示一个连字符.例如,
ABCDEFGabcdefg
可能会呈现为
ABCDEFGabcdefg
或者作为
ABCDEFG abcdefg
截至今天,此元素适用于Firefox和Chrome.