不幸的是，&shy在不同浏览器之间的支持是如此不一致，以至于无法真正使用。

QuirksMode 是正确的——现在还没有在 HTML 中使用软连字符的好方法。看看没有他们你能做什么。

2013年编辑: 根据 QuirksMode，­现在可以在所有主流浏览器上工作/支持。

这是一个跨浏览器的解决方案，我不久前正在研究它，它运行在客户机上并使用 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);

有一个正在进行的努力，以 标准化 CSS3中的连字符。

一些现代浏览器，特别是 Safari 和 Firefox，已经支持这一点。

一旦 CSS 连字符被普遍实现，那将是最好的解决方案。与此同时，我可以推荐 连字符-一个 JS 脚本，它可以找出如何以最适合特定浏览器的方式连接你的文本。

连字符:

• 依赖于通常由 LaTeX 和 OpenOffice 知道的 Franklin M. Liang 连字符算法。
• 在可用的地方使用 CSS3连字符,
• 自动在大多数其他浏览器中插入 ­,
• 支持多种语言,
• 是高度可配置的,
• 如果没有启用 javascript，则优雅地后退。

我用过了，效果很好！

我使用 ­，必要时手动插入。

我总是觉得很遗憾，人们不使用技术，因为有一些ーー可能是旧的或奇怪的ーー浏览器不能按照指定的方式处理它们。我发现 ­在最近的 Internet Explorer 和火狐浏览器中都能正常工作，这就足够了。你可以包括一个浏览器检查，告诉人们使用一些成熟的东西，或继续自己的风险，如果他们来到一些陌生的浏览器。

音节化不是那么容易的，而且 我不建议将它留给某些 Javascript。这是一个特定语言的主题，如果你不想让文字变得恼人，可能需要由桌面工作人员仔细修改。有些语言，如德语，形成复合词，并可能导致分解问题。例如 Spargelder(细菌。省钱，pl。)根据音节规则，可以包裹在两个地方(Spar-gel-der)。然而，把它包在第二个位置，把第一部分显示为 Spargel-(细菌。芦笋) ，在读者的头脑中激活一个完全误导的概念，因此应该避免。

那字符串 Wachstube呢？它可能意味着“警卫室”(Wach-stu-be)或“蜡管”(Wachs-tu-be)。您可能还会发现其他语言中的其他示例。你应该致力于提供一个环境，在这个环境中，桌面人员可以被支持创建一个音节清晰的文本，校对每一个关键词。

有时，如果使用 Unicode 字符串 ­而不是 ­实体，Web 浏览器似乎会更加宽容。

我在少数桌面和移动浏览器中成功地使用了 软连字 Unicode字符来解决这个问题。

Unicode 符号是 \u00AD，很容易插入到 Python unicode 字符串中，如 s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'。

另一个解决方案是插入 unicode 字符本身，源字符串在诸如 sublimText、 Kate、 Geany 等编辑器中看起来非常普通(不过光标会感觉到这个看不见的符号)。

内部工具的十六进制编辑器可以轻松地自动完成这项任务。

一个简单的组装是使用罕见和可见的字符，如 ¦，这是很容易复制和粘贴，并替换为软连字符使用，例如在 $(document).ready(...)的前端脚本。像 s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')这样的源代码比 s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'更容易阅读。

如果您运气不好，仍然不得不使用 JSF1，那么唯一的解决方案是使用 & # 173; ，& shy; 不起作用。

二零一五年二月摘要(部分更新于二零一七年十一月)

他们都表现得很好，­边缘，因为谷歌仍然可以包含它的单词索引。

• 在浏览器中: ­和 ­在主流浏览器(甚至是老的 IE!)中都能正常显示.在最近的 IE 版本(10或11)中不支持 <wbr>，在 Edge 中也不能正常工作。
• 当从浏览器复制和粘贴: (测试于2015年) ，正如预期的 ­和 ­为 Chrome 和 Firefox 在 Mac，在 Windows (10) ，它保持字符和粘贴硬连字符到记事本和不可见的软连字符到支持他们的应用程序。IE (win7)总是使用连字符粘贴，甚至在 IE10中也是如此，而 Safari (Mac)在某些应用程序(如 MS Word)中以连字符的形式粘贴副本，而其他应用程序则不会
• 在页面 上的 Find 适用于除 IE 之外的所有浏览器的 ­和 ­，IE 只匹配精确的复制和粘贴匹配(甚至到 IE11)
• 搜索引擎: Google 将包含 ­的单词与正常输入的单词进行匹配。截至2017年，它似乎不再匹配包含 ­的单词。Yandex 看起来也一样。必应和百度似乎也不匹配。

测试一下

对于最新的实时测试，下面是一些带有软连字符的独特单词的示例。

• ­-confumbabbl­ication­ism-混乱 & 害羞 & 害羞主义
  • ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..
  • ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..

这个站点从输出中删除 <wbr/>。这是一个 用于测试的 jsbin.com 片段。

• ­-eonfulbabbl­ication­ism-eonfulbabbl & # 173; ication & # 173; ism
  • ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..
  • ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..

这里他们没有害羞的连字符(这是为了复制和粘贴到页面上的查找测试; 以一种不会破坏搜索引擎测试的方式编写) :

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

跨浏览器显示

成功: 作为一个正常的单词显示，除了它应该断开的地方，断开的时候，以及在指定的地方连字符。

失败: 表现异常，或未能在预期的地方破裂。

• Chrome (40.0.2214.115，Mac) : ­成功，<wbr>成功，­成功
• Firefox (35.0.1，Mac) : ­成功，<wbr>成功，­成功
• Safari (6.1.2，Mac) : ­成功，<wbr>成功，还没测试成功，­成功
• 边缘(Windows 10) : ­成功，<wbr> 失败(中断但没有连字符) ，­成功
• IE11(Windows 10) : ­成功，<wbr> 失败(无中断) ，­成功
• IE10(Windows 10) : ­成功，<wbr> 失败(无中断) ，­成功
• IE8(Windows 7) : 飘忽不定-有时候，他们没有一个工作在所有，他们都只是遵循 cssword-wrap。有时，他们似乎都工作。至于为什么，还没有找到任何明确的模式。
• IE7(Windows 7) : ­成功，<wbr>成功，­成功

跨浏览器复制粘贴

成功: 复制粘贴整个单词，不用连字符。(测试了 Mac 粘贴到浏览器搜索，微软 Word 2011，和崇高的文本)

失败: 使用连字符、空格、换行符或垃圾字符粘贴。

• 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月。 <wbr>没有测试，因为 StackOverflow 的 CMS 删除了它。

成功: 搜索整个，无连字符的单词找到这个页面。

失败: 搜索引擎只能在搜索中找到这个页面中断片段的单词，或者一个带连字符的单词。

• 谷歌: ­失败，­成功
• 必应: ­失败，­失败
• 百度: ­失败，­失败(可以匹配较长字符串中的片段，但不能匹配包含 ­或 ­的单词)
• Yandex: ­失败，­成功(尽管它可能匹配像百度这样的字符串片段，但不是100% 肯定)

跨浏览器在页面上查找

搜索引擎匹配的成败。

• Chrome (40.0.2214.115，Mac) : ­成功，<wbr>成功，­成功
• Firefox (35.0.1，Mac) : ­成功，<wbr>成功，­成功
• Safari (6.1.2，Mac) : ­成功，<wbr>成功，­成功
• IE10(Win7) : ­ 失败只有当两者都包含害羞连字符时才匹配，<wbr>成功，­ 失败只有当两者都包含害羞连字符时才匹配
• IE8(Win7) : ­ 失败只有当两者都包含害羞连字符时才匹配，<wbr>成功，­ 失败只有当两者都包含害羞连字符时才匹配
• IE7(Win7) : ­ 失败只有当两者都包含害羞连字符时才匹配，<wbr>成功，­ 失败只有当两者都包含害羞连字符时才匹配

注意到这一点非常重要，因为 HTML5，<wbr>和 ­ 不应该做同样的事情！

软连字符

­是一个软连字符，即，U + 00 AD: 软连字符,

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>标签使用。

​

字体连接器实体也很有用，它可以用来禁止中断。(在单词的每个字符之间插入，除非您希望中断。)

⁠

有了这两个，你可以做任何事。

我建议使用 wbr，所以代码可以这样写:

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

它不会导致字符之间的空间，而 ­不会停止由换行创建的空间。

< wbr > 和 & shy;

今天你可以两者兼用。

< wbr > 使用中断，不要放更多信息。

例如，用于显示链接:

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

在必要时，文本将被打断并添加一个连字符。

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&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 que já sa&shy;be.</div>