可以用 word-break:break-all 将单词分解为 50%答案

【问题标题】：Can words be broken at 50% with word-break:break-all可以用 word-break:break-all 将单词分解为 50%
【发布时间】：2015-09-25 08:15:48
【问题描述】：

我可以使用 css 仅在 50% 处分词吗？有可能吗？

而不是 longwor d

long word 看起来不是更好吗？

有什么选择？

更新：所以也许我们可以在很长的单词上使用 js 自动 <wbr>。

【问题讨论】：

那么，您希望您的浏览器了解单词的“50%”在哪里？如果有“stackoverflow”这个词，你希望它输出“stackoverflow”还是“stackoverflow”？
任何东西都可以，只要它不是 stackoverfl ow 或 st ackoverflow，因为它看起来不太好。中间（最近）很好
stackoverflow.com/questions/226464/…
stackoverflow.com/a/32778297/5305938

标签： css

【解决方案1】：

在 CSS 中 hyphens: auto 允许自动识别语言的合理断字。语言派生自 lang 属性。

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

您可能还会发现&shy; 的用途，这是一个手动断字线索。它被称为软连字符，不会被显式渲染，而只是向浏览器提示可能会破坏单词的位置。

Css tricks has a good writeup on the subject

编辑

根据您在 cmets 中的要求，我对 Resig 的 sn-p 进行了轻微改动，以便该模式以完整单词为目标，并在计算出的中间插入 <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

【讨论】：

所以也许我们可以在很长的单词上用js自动。
听起来是一个合理的解决方法。 &shy; 似乎兼容所有主流浏览器；不知道<wbr>。 There's still activity on the chromium ticket 因此，即使票证本身已有 5 年历史，这也可能是期望它被实施的原因。
发现有用的东西ejohn.org/blog/injecting-word-breaks-with-javascript
Hyphenator，frmo Jacques 的回答，是您链接的帖子底部提到的库。如果您要使用 John 提供的非常简单的解决方案，您仍然会在不适当的地方中断。来自他自己的例子：writin<wbr>g。我真的看不出你赢得了break-all 的任何东西。
同意，因此我可能会尝试找到超过 7 个字母的单词，并在中间用 &shy 或 wbr 将它们分开。你有一个脚本可以做到这一点......我不是exp。用js。

【解决方案2】：

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

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

下载最新版本的 Hyphenator.js
将hyphenate 类添加到元素，设置lang 并添加Hyphenator.js <script>。

【讨论】：

它是一个巨大的 142KB 库:(