首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML中的软连字符(<wbr> vs. &shy;)

HTML中的软连字符(<wbr> vs. &shy;)
EN

Stack Overflow用户
提问于 2008-10-22 16:00:45
回答 6查看 167K关注 0票数 171

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

根据this page上的评论,<wbr>是一个非标准的“网景发明的标签汤”。看起来像是&shy; has its problems with standard compliance as well。似乎有no way to get a working solution for all browsers

哪种方法是您处理软连字符的方法?为什么选择它?是否有首选的解决方案或最佳实践?

请参阅相关的SO讨论here

EN

回答 6

Stack Overflow用户

发布于 2015-10-06 22:52:58

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

代码语言:javascript
复制
&#8203;

word joiner实体也很有用,它可以用来禁止中断。(在单词的每个字符之间插入,但要换行的地方除外。)

代码语言:javascript
复制
&#8288;

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

票数 4
EN

Stack Overflow用户

发布于 2010-01-19 13:28:05

这是我刚才看到的一个跨浏览器解决方案,它在客户机上运行,并使用jQuery:

代码语言:javascript
复制
(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); 
票数 2
EN

Stack Overflow用户

发布于 2014-05-11 13:51:37

我在几个桌面和移动浏览器中成功地使用了soft hyphen unicode character来解决这个问题。

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

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

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

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/226464

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档