­
和<wbr>
。根据此页面上的评论,
<wbr>
是一个非标准的“由Netscape发明的标签混乱”。看起来­
也在符合标准方面存在问题。如何在HTML中使用软连字符以在所有浏览器中正常工作?
­
和<wbr>
。<wbr>
是一个非标准的“由Netscape发明的标签混乱”。看起来­
也在符合标准方面存在问题。­
标签。­
单词的查找,它正确地忽略了软连字符。不过我不确定 IE、FF 和其他浏览器是否也是这样。 - evanrmurphy­
,因为在Webkit中存在特定的错误(影响Safari、Safari iOS和Chrome最新版本),导致大量自定义字体(包括免费和商业字体)呈现出奇怪的字符。 - Giulia Nicola Pernice­
和 ­
在主要浏览器中都能正常显示(即使是旧版的IE!)。<wbr>
在最新版本的IE(10或11)中不受支持,并且在Edge中无法正常工作。­
和 ­
的表现如预期,而在Windows(10)上,它会保留字符并将硬连字符粘贴到记事本中,并将不可见的软连字符粘贴到支持它们的应用程序中。IE(win7)始终使用连字符进行粘贴,即使在IE10中也是如此,而Safari(Mac)则以一种方式复制,可以在某些应用程序(例如MS Word)中粘贴为连字符,但在其他应用程序中则不会。­
和 ­
都能正常工作,而IE只能匹配精确复制和粘贴的内容(即使是到IE11)­
的单词和正常输入的单词。截至2017年,它似乎不再匹配包含­
的单词。Yandex似乎也是如此。Bing和Baidu似乎都不匹配。为了进行最新的实时测试,这里有一些带有软连字符的独特单词的例子。
­
- confumbabbl­ication­ism
- confumbabblicationism
<wbr>
- donfounbabbl<wbr>ication<wbr>ism
。此网站会从输出中删除<wbr/>
。这里有一个用于测试的jsbin.com代码片段。
­
- eonfulbabbl­ication­ism
- eonfulbabblicationism
这里是没有害羞连字符的版本(这是为了复制和粘贴到页面测试中使用的;以一种不会破坏搜索引擎测试的方式编写):
ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ
成功:以正常单词的形式显示,除非需要换行,当需要换行时,在指定的位置断开并连字符化。
失败:显示异常,或者无法在预期位置换行。
Chrome (40.0.2214.115, Mac):­
成功, <wbr>
成功, ­
成功
Firefox (35.0.1, Mac): ­
成功, <wbr>
成功, ­
成功
Safari (6.1.2, Mac): ­
成功, <wbr>
尚未测试, ­
成功
Edge (Windows 10): ­
成功, <wbr>
失败 (换行但没有连字符), ­
成功
IE11 (Windows 10): ­
成功, <wbr>
失败 (没有换行), ­
成功
IE10 (Windows 10): ­
成功, <wbr>
失败 (没有换行), ­
成功
IE8 (Windows 7): 不稳定 - 有时候,它们都不起作用,只是遵循css的word-wrap
。有时候,它们似乎都起作用。尚未找到任何明确的模式。
IE7 (Windows 7): ­
成功, <wbr>
成功, ­
成功
成功:复制和粘贴整个单词,不带连字符。(在Mac上测试过,粘贴到浏览器搜索框、MS Word 2011和Sublime Text中)
失败:粘贴时带有连字符、空格、换行符或垃圾字符。
Chrome (40.0.2214.115, Mac):­
成功,<wbr>
成功,­
成功
Firefox (35.0.1, Mac): ­
成功,<wbr>
成功,­
成功
Safari (6.1.2, Mac): ­
失败 在MS Word中(粘贴为连字符),在其他应用程序中成功 <wbr>
失败,­
失败 在MS Word中(粘贴为连字符),在其他应用程序中成功
IE10 (Win7): ­
失败 粘贴为连字符,<wbr>
失败,­
失败 粘贴为连字符
IE8 (Win7): ­
失败 粘贴为连字符,<wbr>
失败,­
失败 粘贴为连字符
IE7 (Win7): ­
失败 粘贴为连字符,<wbr>
失败,­
失败 粘贴为连字符
更新于2017年11月。由于StackOverflow的CMS剥离了它,因此未测试<wbr>
。
成功:搜索整个非连字符单词可以找到此页面。
失败:搜索引擎只能在搜索断开的单词片段或带连字符的单词时找到此页面。
­
失败,­
成功­
失败,­
失败­
失败,­
失败(可以匹配较长字符串中的片段,但不能匹配包含­
或­
的单独单词)­
失败,­
成功(尽管可能像百度一样匹配字符串片段,但不能百分之百确定)­
成功,<wbr>
成功,­
成功
Firefox (35.0.1, Mac): ­
成功,<wbr>
成功,­
成功
Safari (6.1.2, Mac): ­
成功,<wbr>
成功,­
成功
IE10 (Win7): ­
失败 只有在两者都包含 shy 连字符时才匹配,<wbr>
成功,­
失败 只有在两者都包含 shy 连字符时才匹配
IE8 (Win7): ­
失败 只有在两者都包含 shy 连字符时才匹配,<wbr>
成功,­
失败 只有在两者都包含 shy 连字符时才匹配
IE7 (Win7): ­
失败 只有在两者都包含 shy 连字符时才匹配,<wbr>
成功,­
失败 只有在两者都包含 shy 连字符时才匹配<wbr/>
在两者中都可以工作。请注意,当出现换行时,<wbr>
元素不应该添加连字符。换句话说,<wbr/>
和­
不应该做同样的事情。 - Andreas Rejbrand<wbr/>
,但是在源代码中保留了它们。该死的 SE!我会进行编辑。 - user56reinstatemonica8­
和 ­
有意义吗?一旦它们到达 DOM,它们就是完全相同的;只有在 HTML 分词器中它们才有所不同。 - gsnedders<wbr>
标签:http://caniuse.com/#feat=wbr-element。但最好进行一些实际测试,特别是对于IE 11。 - Dennis98目前正在进行努力,以在CSS3中标准化连字。
一些现代浏览器,特别是Safari和Firefox已经支持了此功能。这里提供一个好的并且最新的浏览器支持参考文献。
CSS连字一旦得到普及实施,那将是最好的解决方案。与此同时,我可以推荐使用Hyphenator - 这是一个JS脚本,用于确定如何对文本进行连字划分,以适合特定的浏览器。
Hyphenator:
­
,我已经使用过它,效果很好!
我手动添加 ­
,在必要的地方。
我常常觉得可惜,因为有些可能是古老或奇怪的浏览器不能像它们规定的那样处理技术,所以人们不使用这些技术。 我发现 ­
在最近的Internet Explorer和Firefox浏览器中都可以正常工作,那应该足够了。 如果用户使用一些奇怪的浏览器,您可以包含一个浏览器检查,告诉他们使用成熟的浏览器或自担风险。
断音并不容易,我不建议将其留给一些Javascript。 这是一个特定于语言的主题,如果你不想让它变得令人不爽,可能需要由编辑仔细修订。有些语言,例如德语,形成复合词,可能会导致分解问题。 例如,Spargelder
(germ。 储蓄的钱,复数)根据断音规则可能被分成两个部分(Spar-gel-der
)。 但是,在第二个位置上包裹它会使第一部分显示为Spargel-
(germ。 芦笋),激活读者头脑中完全误导的概念,因此应避免。
那么字符串 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中使用。
我建议使用wbr
,这样代码可以像这样编写:
<p>这里有一段很长,很长的<wbr
></wbr>文字;这里有一段</p>
­
无法阻止由换行符创建的空格。(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字符本身,在像Sublime Text、Kate、Geany等编辑器中,源字符串看起来非常普通(光标会感觉到不可见的符号)。
内部工具的十六进制编辑器可以轻松自动化此任务。
一个简单的方法是使用罕见且可见的字符,如¦
,它很容易复制和粘贴,并使用前端脚本在$(document).ready(...)
中将其替换为软连字符。像s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')
这样的源代码比s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'
更易于阅读。
今天你可以同时使用它们。
<wbr> 用于断字,但不会放置更多信息。
例如,用于显示链接:
https://dev59.com/g3VC5IYBdhLWcg3wpS3f
­ 在必要时使用,此时文本将断开并添加连字符。
例如:
"É im­pos­sí­vel pa­ra um ho­mem a­pren­der a­qui­lo que ele acha que já sa­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>
<wbr>
根本不应该是连字符。 - Andreas Rejbrand