HTML中的软连字符（<wbr> vs＆shy;）
你如何解决你的网页上的软连字符问题？ 在文本中可能会有很长的单词，您可能想用连字符换行。 但是你不希望连字符显示整个单词是否在同一行上。
根据这个网页的评论<wbr>是一个非标准的“网景发明的标签汤”。 这似乎很­ 在遵守标准方面也存在问题 。 似乎没有办法得到所有浏览器的工作解决scheme 。
哪个是你处理软连字符的方法，你为什么select它？ 有一个首选的解决scheme或最佳做法？
在这里查看相关的SO讨论。
不幸的是， ­ ”的支持在浏览器之间如此不一致，以至于无法真正被使用。
QuirksMode是正确的 – 现在没有好方法在HTML中使用软连字符。 看看你可以做什么去没有他们。
2013编辑： 根据QuirksMode ， ­ 现在工作/在所有主stream浏览器上都受支持。
目前正在努力将CSS3中的连字标准化 。
一些现代浏览器，特别是Safari和Firefox，已经支持这一点。 以下是浏览器支持的最佳参考 。
一旦CSS连字得到普遍实施，那将是最好的解决scheme。 同时，我可以推荐Hyphenator – 一个JS脚本，它能够以最适合特定浏览器的方式计算出如何连字符。
连字符：
- 依赖于Franklin M.Langs连字algorithm ，通常从LaTeX和OpenOffice中已知。
- 在可用的情况下使用CSS3连字符，
- 自动插入
­在大多数其他浏览器上， - 支持多种语言，
- 是高度可configuration的，
- 如果javascript没有启用，优雅地回落。
我用它，它工作的很好！
2015年2月摘要
- 由SE CMS剥离出来…在适应我的testing之后，似乎和其他人一样可靠。
-
­和­在主要的浏览器（甚至是旧的IE浏览器！ - 复制和粘贴的行为和预期的一样
­和­适用于Mac上的Chrome和Firefox。 IE（win7）总是粘贴连字符，即使在IE10中，Safari（Mac）也以某种方式粘贴连字符（例如MS Word），而不是其他的 - 在网页上查找的作品
­和­在除IE之外的所有浏览器上只匹配精确的复制粘贴的匹配（甚至IE10） - 谷歌匹配包含
­单词­和­用文字input正常。 没问题。 一旦索引这个答案，将添加其他search引擎 - 我无法复制关于
­的评论­比­更可靠­– 在我的testing中，他们给出了相同的结果。
testing它
对于最新的现场testing，这里是一些具有软连字符的独特单词的例子。
-
­–confumbabbl­ication­ism漠不关心confumbabbl­ication­ism– confumbabbismism- ………………………………………….. ………………………………………….. ………. confumbabblicationism
- ………………………………………….. ………………………………………….. ………….. confumbabblicationism
– – – – – – – – – – – – 这个网站从输出中删除<wbr/> 。 这是一个用于testing的jsbin.com代码片段 。
-
­–eonfulbabbl­ication­ism（eonfulbabbl） – 主观eonfulbabbl­ication­ism- ………………………………………….. ………………………………………….. …………. eonfulbabblicationism
- ………………………………………….. ………………………………………….. ……………. eonfulbabblicationism
在这里，他们没有害羞的连字符（这是为了复制和粘贴到页面查找testing;以不会中断search引擎testing的方式）：
ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationism
testing与详细的结果：
跨浏览器显示
成功：显示为一个正常单词，除非它在什么地方断裂，何时在指定的地方断开连字符。
失败：显示exception，或未能在预定位置中断。
- Chrome（40.0.2214.115，Mac）：
­成功，<wbr>成功，­成功 - Firefox（35.0.1，Mac）：
­成功，<wbr>成功，­成功 - Safari（6.1.2，Mac）：
­成功，<wbr>尚未testing ，­成功 - IE10（Windows 7）：
­成功，<wbr>尚未testing ，­成功 - IE8（Windows 7）：不稳定 – 有时，他们都没有工作，他们都只是按照
word-wrap。 有时，他们似乎都工作。 还没有find明确的模式，为什么。 - IE7（Windows 7）：
­成功，<wbr>成功，­成功
在浏览器中复制粘贴
成功：复制和粘贴整个单词，没有连字符。 （在Mac上进行testing，粘贴到浏览器search，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>失败 ，­不能作为连字符粘贴
search引擎匹配
成功：整体search，非连字符find这个页面。
失败：search引擎只能find这个网页search单词的破碎部分，或连字符的单词。
- Google：
­成功，<wbr>成功，­成功
一旦明确索引，会增加更多的search引擎结果
跨浏览器在页面上查找
成功和失败的search引擎匹配。
- Chrome（40.0.2214.115，Mac）：
­成功，<wbr>成功，­成功 - Firefox（35.0.1，Mac）：
­成功，<wbr>成功，­成功 - Safari（6.1.2，Mac）：
­成功，<wbr>成功，­成功 - IE10（Win7）：
­只有当两个都包含害羞的连字符时才会失败 ，<wbr>success，­只有当两个都包含害羞的连字符时才会失败 - IE8（Win7）：
­只有当两个都包含害羞的连字符时才会失败 ，<wbr>success，­只有当两个都包含害羞的连字符时才会失败 - IE7（Win7）：
­只有当两个都包含害羞的连字符时才会失败 ，<wbr>success，­只有当两个都包含害羞的连字符时才会失败
我使用­ ，必要时手动插入。
我总觉得人们不使用技术是件可惜的事情，因为有一些 – 也许是旧的或者陌生的浏览器，在这些浏览器中，没有按照指定的方式处理它们。 我发现， ­ 在最近的Internet Explorer和Firefox浏览器中都能正常工作，这应该足够了。 你可能会包含一个浏览器检查，告诉人们使用某些成熟的东西，或者如果他们遇到一些奇怪的浏览器，就要冒着风险继续。
音节化不是那么容易， 我不能推荐把它留给一些Javascript 。 这是一个语言特定的主题，如果你不想让文字变得刺激，可能需要桌面人员仔细修改。 一些语言，如德语，形成复合词，可能导致分解问题。 例如Spargelder （ 细菌保存的钱，pl。）可能按照硫化法规则被包裹在两个地方（ Spar-gel-der ）。 然而，把它包装在第二个位置，把第一部分变成Spargel- （ 细菌，芦笋），在读者的头上Spargel-一个完全误导的概念，因此应该避免。
那么Wachstube呢？ 它可能意味着“警卫室”（ Wach-stu-be ）或“蜡pipe”（ Wachs-tu-be ）。 你也许可以在其他语言中find其他的例子。 你的目标应该是提供一个环境，在这个环境中，桌面人员可以在创build一个完整的文本文本时支持，校对每个关键词。
注意到这一点非常重要，就像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的交叉浏览器解决scheme：
(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);
零宽度空间实体可以在几乎每个平台上可靠地用来代替<wbr>标签。
​
joiner实体也是有用的，可以用来禁止rest。 （插入单词的每个字符之间，除了你想要rest的地方。）
⁠
有了这两个，你可以做任何事情。
我build议使用wbr ，所以代码可以这样写：
<p>这里有一段很长，很长的<wbr ></wbr>文字；这里有一段</p>
这不会导致字符之间的空间，而­ 不会停止由换行符创build的空格。
我在一些桌面和移动浏览器上成功地使用了软连字符字符来解决这个问题。
unicode符号是\u00AD ，很容易插入Python unicodestring，如s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния' 。
其他解决scheme是插入unicode字符本身，并且源string在Sublime Text，Kate，Geany等编辑器中看起来是完全普通的（游标会感觉到不可见符号）。
内部工具的hex编辑器可以轻松自动执行此任务。
一个简单的方法就是使用稀有可见的字符，例如¦ ，它很容易复制和粘贴，并用软连字符代替，例如$(document).ready(...)前端脚本。 源代码像s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')比s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния' 。
有时，如果您使用Unicodestring­networking浏览器似乎更宽容 而不是­ 实体。
如果运气不好，仍然需要使用JSF 1，那么唯一的解决方法就是使用＆＃173;＆shy; 不起作用。
