可以通过分词来打破50％的单词：break-all

Question

我可以使用css仅以50％的话来打破单词吗？有可能吗？

而不是 longwor d

long word看起来不是更好吗？

有什么替代方案？

更新：所以也许我们可以用真正长字的js自动<wbr>。

Answer 1

在CSS中hyphens: auto允许自动语言识别合理的连字符。语言源自lang属性。

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

您也可以找到­的用法，这是一个手动的连字线索。它被称为软连字符并且不会被可见地呈现，但仅仅向浏览器建议可能会破坏单词。

Css tricks has a good writeup on the subject

修改

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

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

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

Answer 2

我建议使用Hyphenator库，因为hyphens: auto CSS属性为not supported in the Chrome and Android Browser。

要使用此库，请按照以下简单步骤操作：

• 下载最新版本的Hyphenator.js

• 为元素添加hyphenate个类，设置lang并添加Hyphenator.js <script>。