您如何用网页上的软连字符解决问题?在文本中,可能有很长的单词,您可能想用连字符换行。但是您不希望连字符显示整个单词是否在同一行上。
根据本页 <wbr>
上的评论,这是一种非标准的“ Netscape发明的标签汤”。似乎­
在标准合规性方面也存在问题。似乎没有办法为所有浏览器获得有效的解决方案。
您使用哪种方式处理软连字符,为什么选择它?有没有首选的解决方案或最佳做法?
在此处 查看相关的SO讨论。
<wbr>
根本不是连字符。
您如何用网页上的软连字符解决问题?在文本中,可能有很长的单词,您可能想用连字符换行。但是您不希望连字符显示整个单词是否在同一行上。
根据本页 <wbr>
上的评论,这是一种非标准的“ Netscape发明的标签汤”。似乎­
在标准合规性方面也存在问题。似乎没有办法为所有浏览器获得有效的解决方案。
您使用哪种方式处理软连字符,为什么选择它?有没有首选的解决方案或最佳做法?
<wbr>
根本不是连字符。
Answers:
不幸的是,各­
浏览器之间对的支持不一致,以致于不能真正使用它。
QuirksMode是正确的-目前尚无在HTML中使用软连字符的好方法。看看没有他们该怎么办。
2013编辑:根据QuirksMode,­
现在在所有主流浏览器上均可使用/受支持。
­
在Chrome v21中找到一个单词,它正确地忽略了软连字符。虽然不确定IE,FF和其他浏览器。
­
由于Webkit中的特定错误(影响Safari,Safari iOS和Chrome最新版本)导致使用大量自定义字体(免费和商业字体)的怪异字符渲染,我们不得不放弃使用量
它们的性能都非常好,­
因为Google仍然可以索引包含它的单词,所以使其处于优势地位。
­
和­
预期都显示在主流浏览器(甚至是旧IE!)。<wbr>
在IE的最新版本(10或11)中不受支持,并且在Edge中无法正常工作。­
和­
对Chrome和Firefox在Mac,Windows上(10),它使字符和粘贴硬连字符到记事本和无形的软连字符到支持他们的应用程序。IE(win7)始终粘贴连字符,即使在IE10中也是如此,而Safari(Mac)副本的粘贴方式是在某些应用程序(例如MS Word)中粘贴为连字符­
并且适用­
于所有浏览器,但IE仅匹配完全匹配的复制粘贴内容(甚至不超过IE11)­
的单词与正常键入的单词匹配。截至2017年,似乎不再匹配包含的单词­
。Yandex也是如此。必应和百度似乎都不匹配。对于最新的实时测试,以下是一些带有软连字符的独特单词的示例。
­
- confumbabbl­ication­ism
- confumbabblicationism
<wbr>
- donfounbabbl<wbr>ication<wbr>ism
。该站点<wbr/>
将从输出中删除。这是用于测试的jsbin.com代码段。
­
- eonfulbabbl­ication­ism
- eonfulbabblicationism
在这里,它们没有害羞的连字符(这是用于复制和粘贴到页面查找测试中;以不会破坏搜索引擎测试的方式编写):
ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ
成功:显示为正常单词,但在指定位置出现断点和连字符时,除应中断的地方外。
失败:显示异常,或未在预期的位置破裂。
­
成功,<wbr>
成功,­
成功­
成功,<wbr>
成功,­
成功­
成功,<wbr>
尚未测试,­
成功­
成功,<wbr>
失败(中断但没有连字符),­
成功­
成功,<wbr>
失败(不间断),­
成功­
成功,<wbr>
失败(不间断),­
成功word-wrap
。有时,它们似乎都起作用。尚未找到关于原因的明确模式。­
成功,<wbr>
成功,­
成功成功:复制并粘贴整个单词,不加连字符。(在粘贴到浏览器搜索,MS Word 2011和Sublime Text的Mac上进行了测试)
失败:粘贴带有连字符,空格,换行符或垃圾字符。
­
成功,<wbr>
成功,­
成功­
成功,<wbr>
成功,­
成功­
失败进入MS Word(全部粘贴为连字符),在其他应用程序中成功<wbr>
失败,­
失败进入MS Word(全部粘贴为连字符),在其他应用程序中成功­
失败将所有内容粘贴为连字符,<wbr>
失败,­
失败将所有内容粘贴为连字符­
失败将所有内容粘贴为连字符,<wbr>
失败,­
失败将所有内容粘贴为连字符­
失败将所有内容粘贴为连字符,<wbr>
失败,­
失败将所有内容粘贴为连字符2017年11月更新。<wbr>
未经测试,因为StackOverflow的CMS删除了它。
成功:搜索整个非连字词,找到此页面。
失败:搜索引擎仅在搜索单词或带连字符的断句时才能找到此页面。
­
失败,­
成功­
失败,­
失败­
失败,­
失败(可以匹配较长字符串中的片段,但不能匹配包含a ­
或的单词本身­
)­
失败,­
成功(尽管有可能匹配像百度这样的字符串片段,但并非100%肯定)成功与失败作为搜索引擎的匹配。
­
成功,<wbr>
成功,­
成功­
成功,<wbr>
成功,­
成功­
成功,<wbr>
成功,­
成功­
不能只匹配时,都含有害羞的连字符,<wbr>
成功,­
失败,只有当两者都含有害羞的连字符相匹配­
不能只匹配时,都含有害羞的连字符,<wbr>
成功,­
失败,只有当两者都含有害羞的连字符相匹配­
不能只匹配时,都含有害羞的连字符,<wbr>
成功,­
失败,只有当两者都含有害羞的连字符相匹配<wbr/>
可以在Firefox和Chrome中使用。(而且,老实说,我怀疑它甚至在2月份也是如此,至少在Windows上是。)
<wbr/>
两者均可工作。请注意,发生中断时,不应为该<wbr>
元素添加连字符。换句话说,<wbr/>
和­
的不应该做同样的事情。
<wbr/>
s从最终标记中删除,同时将它们保留在源代码中。该死的SE!将会编辑..
­
和有什么意义­
吗?一旦到达DOM,它们实际上是相同的。只有在HTML标记器中,它们才完全不同。
目前正在努力使CSS3中的连字标准化。
一些现代的浏览器,尤其是Safari和Firefox,已经支持此功能。这是有关浏览器支持的良好且最新的参考。
一旦CSS连字被普遍实现,那将是最好的解决方案。同时,我可以推荐Hyphenator-一个JS脚本,该脚本说明了如何以最适合特定浏览器的方式对文本进行断字。
连字符:
­
大多数其他浏览器,我已经用过了,效果很好!
我使用­
,在需要时手动插入。
我总是感到遗憾的是,人们没有使用技术,因为有些浏览器(可能是古老的或奇怪的)浏览器无法按照指定的方式处理它们。我发现­
在最近的Internet Explorer和Firefox浏览器中都可以正常工作,这足够了。您可能会包含浏览器检查,告诉人们使用某些成熟的工具,或者如果他们使用某些奇怪的浏览器,后果自负。
音节化并不是那么容易,我不建议您将其留给Javascript。这是一个特定于语言的主题,如果您不希望它使您的文字令人讨厌,那么主持人可能需要对其进行仔细地修改。某些语言(例如德语)形成复合词,并可能导致分解问题。例如,根据音节规则,可以将细菌Spargelder
(节省的钱等)包装在两个位置()。然而,在第二位置它包裹,使第一部分显示为(胚芽。芦笋),激活在读取器的头部的完全误导概念并且因此768,16被避免。Spar-gel-der
Spargel-
那字符串Wachstube
呢?它可能表示“警卫室”(Wach-stu-be
)或“蜡管”(Wachs-tu-be
)。您可能还会找到其他语言的其他示例。您应该致力于提供一个环境,在这个环境中可以帮助桌面服务员创建清晰易懂的文本,并校对每个关键单词。
请注意,从HTML5开始, <wbr>
并且­
不应做同样的事情!
软连字符
­
是一个软连字符,即U + 00AD:SOFT HYPHEN。例如,
innehålls­förteckning
可能呈现为
innehållsförteckning
或作为
innehålls-
förteckning
到目前为止,软连字符可在Firefox,Chrome和Internet Explorer中使用。
的 wbr
元素
该wbr
元素是一个分词机会,如果发生换行符,则不会显示连字符。例如,
ABCDEFG<wbr/>abcdefg
可能呈现为
ABCDEFGabcdefg
或作为
ABCDEFG
abcdefg
到目前为止,此元素可在Firefox和Chrome中使用。
这是我刚才看过的跨浏览器解决方案,它在客户端上运行并使用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);
我在少数台式机和移动浏览器中成功使用了软连字符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ния'
。
有时,如果您使用Unicode字符串­
而不是­
实体,则Web浏览器似乎更宽容。
今天,您可以同时使用两者。
<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­pos­sí­vel pa­ra um ho­mem a­pren­der a­qui­lo que ele acha que já sa­be.</div>