和＆shy;

Question

如何解决网页上的软连字符问题？在文本中可能有一些长词，您可能想要用连字符换行。但是你不希望连字符显示整个单词是否在同一行。

根据this page <wbr>的评论是由Netscape发明的非标准“标签汤”。好像是 has its problems with standard compliance as well。似乎有no way to get a working solution for all browsers。

您处理软连字符的方法是什么？为什么选择它？有优选的解决方案还是最佳实践？

<小时/> 请参阅相关的SO讨论here。

Answer 1

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

~~QuirksMode是对的 - 现在没有好的方法在HTML中使用软连字符。看看没有它们你能做些什么。~~

2013年修改：According to QuirksMode，现在可以在所有主流浏览器上使用/支持。

Answer 2

standardize hyphenation in CSS3正在不断努力。

一些现代浏览器，特别是Safari和Firefox，已经支持这一点。这是一个很好的最新reference on browser support。

一旦CSS连字普遍实现，那将是最好的解决方案。在此期间，我可以推荐Hyphenator - 一个JS脚本，它可以找出如何以最适合特定浏览器的方式对文本进行连字。

连字符：

依赖于Franklin M. Liangs hyphenation algorithm，通常来自LaTeX和OpenOffice。
使用CSS3连字符，
自动在大多数其他浏览器上插入
支持多种语言，
具有高度可配置性，
优雅地退回以防javascript未启用。

我已经习惯了它，效果很好！

Answer 3

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

我总觉得很遗憾，人们不使用技术，因为有一些 - 可能是旧的或奇怪的 - 浏览器周围没有按照指定的方式处理它们。我发现在最近的Internet Explorer和Firefox浏览器中都能正常工作，这应该足够了。您可以包含一个浏览器检查，告诉人们使用成熟的东西，如果他们遇到一些奇怪的浏览器，可能会自行承担风险。

Syllabification并不那么容易，我不建议将其留给某些Javascript 。这是一个特定于语言的主题，如果你不想让你的文字变得烦躁，可能需要由服务员仔细修改。某些语言（如德语）会形成复合词，并可能导致分解问题。例如。根据音节规则，Spargelder（ germ。省钱，pl。）可以包含在两个地方（Spar-gel-der）。然而，将它包裹在第二个位置，会使第一部分显示为Spargel-（ germ。芦笋），在读者头部激活一个完全误导性的概念，因此应该是避免。

字符串Wachstube怎么样？它可能意味着'警卫室'（Wach-stu-be）或'蜡烛管'（Wachs-tu-be）。您可能也会在其他语言中找到其他示例。 您应该致力于提供一个环境，在这个环境中，可以支持服务员创建一个完整的文本，并对每个关键词进行校对。

Answer 4

非常重要的是要注意，从HTML5开始，<wbr>和 不应该做同样的事情！

软连字符

是一个软连字符，即U + 00AD：SOFT HYPHEN。例如，

innehålls&shy;förteckning

可能会呈现为

innehållsförteckning

或

innehålls-
förteckning

截至今天，软连字符适用于Firefox，Chrome和Internet Explorer。

wbr元素

The wbr element是一个分词机会，如果发生换行，则不会显示连字符。例如，

ABCDEFG<wbr/>abcdefg

可能会呈现为

ABCDEFGabcdefg

或

ABCDEFG
abcdefg

截至今天，此元素适用于Firefox和Chrome。

Answer 5

可以在几乎每个平台上可靠地使用zero-width space实体代替<wbr>标记。

&#8203;

word joiner实体也很有用，它可用于禁止中断。（在单词的每个字符之间插入，除了你想要休息的地方。）

&#8288;

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

Answer 6

这是我刚才看到的一个跨浏览器解决方案，它在客户端运行并使用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);

Answer 7

我建议使用wbr，因此代码可以这样编写：

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

它不会在字符间引导空间，而不会停止由换行符创建的空格。

Answer 8

我在少数桌面和移动浏览器中成功使用soft hyphen unicode character来解决此问题。

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

其他解决方案是插入unicode char本身，源代码字符串在Sublime Text，Kate，Geany等编辑器中看起来非常普通（尽管游标会感觉到不可见的符号）。

内部工具的Hex编辑器可以轻松地自动执行此任务。

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

Answer 9

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

Answer 10

如果你运气不好而仍然需要使用JSF 1，那么唯一的解决方案是使用＆amp;＃173;，＆amp; shy;不起作用。

Answer 11

和＆shy;

今天您可以同时使用两者。

用于中断，并且不放置更多信息。

示例，用于显示链接：

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

＆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&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>

HTML中的软连字符（<wbr /> vs.）

11 个答案:

和＆shy;