你如何解决网页上软连字符的问题?在文本中,可能有一些长单词,您可能想要用连字符换行。但您不希望连字符显示整个单词是否在同一行上。
根据this page上的评论,<wbr>
是一个非标准的“网景发明的标签汤”。看起来像是­
has its problems with standard compliance as well。似乎有no way to get a working solution for all browsers。
哪种方法是您处理软连字符的方法?为什么选择它?是否有首选的解决方案或最佳实践?
请参阅相关的SO讨论here。
发布于 2015-10-06 22:52:58
可以在几乎每个平台上可靠地使用zero-width space实体来代替<wbr>
标签。
​
word joiner实体也很有用,它可以用来禁止中断。(在单词的每个字符之间插入,但要换行的地方除外。)
⁠
有了这两个,你可以做任何事情。
发布于 2010-01-19 13:28:05
这是我刚才看到的一个跨浏览器解决方案,它在客户机上运行,并使用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);
发布于 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')
这样的源代码更容易阅读。
https://stackoverflow.com/questions/226464
复制相似问题