您如何解决网页上的软连字符问题？在文本中可能有很长的单词，您可能想用连字符换行。但是您不希望连字符显示整个单词是否在同一行。
根据这个页面 <wbr>的评论是一个非标准的“网景发明的标签汤”。似乎­ 在标准合规性方面也存在问题。似乎没有办法为所有浏览器找到可行的解决方案。
你处理软连字符的方式是什么，你为什么选择它？是否有首选解决方案或最佳实践？
在此处 查看相关的 SO 讨论。
问问题
167036 次
在此处 查看相关的 SO 讨论。
12 回答
144
不幸的是，­浏览器之间的支持是如此不一致，以至于无法真正使用它。
QuirksMode 是对的——目前还没有在 HTML 中使用软连字符的好方法。看看没有它们你能做些什么。
2013 年编辑：根据 QuirksMode，­现在所有主流浏览器都支持/支持。
于 2008-10-22T19:49:30.353 回答
74
2015 年 2 月摘要（2017 年 11 月部分更新）
它们都表现得很好，­因为谷歌仍然可以索引包含它的单词。
- 在浏览器中： 在主流浏览器（甚至是旧的 IE！）中都按预期显示
­。在最新版本的 IE（10 或 11）中不受支持，并且在 Edge 中无法正常工作。­<wbr> - 从浏览器复制和粘贴时：（测试于 2015 年）对于Mac 和 Windows (10) 上的 Chrome
­和­Firefox，它会保留字符并将硬连字符粘贴到记事本中，将不可见的软连字符粘贴到支持它们的应用程序中。IE (win7) 总是粘贴连字符，即使在 IE10 中也是如此 - 在页面上查找适用于所有浏览器
­，­除了 IE，它只匹配精确的复制和粘贴匹配项（甚至高达 IE11） - 搜索引擎： Google 将包含
­的单词与正常输入的单词匹配。截至 2017 年，它似乎不再匹配包含­. Yandex 似乎是一样的。必应和百度似乎也不匹配。
测试一下
对于最新的实时测试，以下是一些带有软连字符的独特单词的示例。
­——confumbabbl­ication­ism混淆论- ..................................................... ..................................................... ..........混淆论
- ..................................................... ..................................................... ............. 混淆论
<wbr>- donfounbabbl<wbr>ication<wbr>ism。<wbr/>此站点从输出中删除。这是用于测试的 jsbin.com 片段。
­-eonfulbabbl­ication­ism- 完整的唠叨主义- ..................................................... ..................................................... ......
- ..................................................... ..................................................... ......
在这里，它们没有害羞的连字符（这是为了复制和粘贴到页面上的查找测试中；以不会破坏搜索引擎测试的方式编写）：
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):
­fail全部粘贴为连字符，<wbr>fail ,­fail全部粘贴为连字符 - IE7 (Win7):
­fail全部粘贴为连字符，<wbr>fail ,­fail全部粘贴为连字符
搜索引擎匹配
2017 年 11 月更新。<wbr>未测试，因为 StackOverflow 的 CMS 将其剥离。
成功：搜索整个非连字符的单词找到此页面。
失败：搜索引擎仅在搜索单词的损坏片段或带有连字符的单词时才找到此页面。
- 谷歌：
­失败，­成功 - 必应：
­失败，­失败 - 百度：
­失败，­失败（可以匹配较长字符串中的片段，但不能匹配包含­or的单词­） - Yandex：
­失败，­成功（虽然它可能匹配百度之类的字符串片段，但不是 100% 肯定）
跨浏览器在页面上查找
成败作为搜索引擎匹配。
- Chrome（40.0.2214.115，Mac）：
­成功，<wbr>成功，­成功 - Firefox（35.0.1，Mac）：
­成功，<wbr>成功，­成功 - Safari（6.1.2，Mac）：
­成功，<wbr>成功，­成功 - IE10 (Win7):
­fail只在两者都包含shy hyphens 时匹配，<wbr>success,­fail只在两者都包含shy hyphens 时匹配 - IE8 (Win7):
­fail只在两者都包含shy hyphens 时匹配，<wbr>success,­fail只在两者都包含shy hyphens 时匹配 - IE7 (Win7):
­fail只在两者都包含shy hyphens 时匹配，<wbr>success,­fail只在两者都包含shy hyphens 时匹配
于 2015-02-23T11:15:22.557 回答
33
正在努力标准化 CSS3 中的连字符。
一些现代浏览器，尤其是 Safari 和 Firefox，已经支持这一点。这是有关浏览器支持的最新参考资料。
一旦 CSS 断字得到普遍实施，那将是最好的解决方案。同时，我可以推荐Hyphenator - 一个 JS 脚本，它计算出如何以最适合特定浏览器的方式对文本进行连字符。
连字符：
- 依赖于Franklin M. Liangs 的连字算法，通常来自 LaTeX 和 OpenOffice。
- 在可用的情况下使用 CSS3 连字符，
­在大多数其他浏览器上自动插入，- 支持多种语言，
- 高度可配置，
- 在未启用 javascript 的情况下优雅地回退。
我用过，效果很好！
于 2013-02-10T12:56:17.423 回答
22
我­在必要时使用 , 手动插入。
我总是觉得遗憾的是人们不使用技术，因为有一些（可能是旧的或奇怪的）浏览器并没有按照指定的方式处理它们。我发现它­在最近的 Internet Explorer 和 Firefox 浏览器中都可以正常工作，这应该足够了。您可能会包括一个浏览器检查，告诉人们使用成熟的东西，或者如果他们使用一些奇怪的浏览器，则继续自担风险。
音节化不是那么容易，我不建议将它留给一些 Javascript。这是一个特定于语言的主题，如果您不希望它使您的文本烦人，可能需要由服务员仔细修改。某些语言，例如德语，会形成复合词，并可能导致分解问题。例如Spargelder（germ. saved money, pl.），根据音节规则，可以被包裹在两个地方（Spar-gel-der）。然而，将它包裹在第二个位置，将第一部分变成Spargel-（细菌。芦笋），在读者的脑海中激活一个完全误导性的概念，因此应该避免。
那字符串Wachstube呢？它可以表示“警卫室”（Wach-stu-be）或“蜡管”（Wachs-tu-be）。您可能还可以找到其他语言的其他示例。您的目标应该是提供一个环境，在该环境中，可以支持服务员创建音节清晰的文本，校对每个关键词。
于 2013-02-15T09:16:53.013 回答
16
值得注意的是，从 HTML5 开始，<wbr>不­ 应该做同样的事情！
软连字符
­是软连字符，即U+00AD：软连字符。例如，
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 中使用。
于 2015-04-18T17:28:43.627 回答
2
这是我不久前正在查看的跨浏览器解决方案，它在客户端上运行并使用 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);
于 2010-01-19T05:28:04.603 回答
2
我在少数桌面和移动浏览器中成功地使用了软连字符 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ния'.
于 2014-05-11T05:51:37.370 回答
2
我建议使用wbr，所以代码可以这样写：
<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>
它不会导致字符之间的空格，同时­不会停止由换行符创建的空格。
于 2016-01-15T22:56:32.690 回答
0
­有时，如果您使用 Unicode 字符串而不是­实体，Web 浏览器似乎更宽容。
于 2014-02-20T21:33:26.420 回答
0
如果运气不好还得使用 JSF 1，那么唯一的解决办法就是使用 , 不起作用。
于 2014-12-30T07:29:21.990 回答
0
<wbr> 和
今天你可以同时使用两者。
<wbr>使用break，不要放更多信息。
示例，用于显示链接：
https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy
＆害羞的; 必要时，此时文本将中断并添加连字符。
例子：
“É impossível para um homem aprender aquilo que ele acha que já sabe。”
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>于 2019-07-01T13:51:48.957 回答