css - 可以使用断字 :break-all 将单词打断到 50%

Question

我可以使用 css 仅在 50% 处中断单词吗？可能吗？

代替 longwor
d

没有long
word看起来更好？

还有什么选择？

更新:也许我们可以自动 <wbr>用js就真长的话。

Answer 1

在 CSS 中 hyphens: auto 允许自动的语言感知断字。语言源自 lang属性(property)。

兼容性因语言和浏览器而异(遗憾的是，在 Chrome 中根本没有实现)。

您可能还会发现 ­ 的用途这是一个手动断字线索。它被称为软连字符，并没有明显呈现，而只是向浏览器提示单词可能被破坏的地方。

Css tricks has a good writeup on the subject

编辑

根据您在评论中的要求，我对 Resig 的代码片段进行了细微改动，以便该模式以完整单词为目标并插入 <wbr>在计算的中间，而不是总是在阈值长度之后。

对实际模式的唯一修改是继续搜索，而不是在阈值之后停止。我还取消了分组括号，因为我们只会使用完整的单词:

RegExp("\\w{" + num + "}\\w+", "g")

然后我们找到单词的中心 ( c = Math.floor(all.length/2) ) 并在该点插入浏览器提示。我加了一个参数表示是否wbr或 shy应该使用。后者在需要连字符时呈现为连字符，而前者则不需要。

all.substring(0,c) + (!!shy?'&shy;':'<wbr>') + all.substring(c)

请注意，对于大于 num*2 的字长，个别部分也会超过阈值。为了解决这个问题，我简单地添加了递归:

function wbr(str, num, shy) {  
  return str.replace(RegExp("\\w{" + num + "}\\w+", "g"), function(all){
    var c = Math.floor(all.length/2);
    return wbr(all.substring(0,c) + (!!shy?'&shy;':'<wbr>') + all.substring(c),num,shy);
  });
}

Demo