分解大字/防止破坏布局/连字符 js

Question

我已经看到并浏览了太多页面来解释相同的问题并取得了各种成功。我想要做的是想出一种方法，我可以分解大词，这样它们就不会通过将内容拉伸到指定宽度之外来破坏 table/divs/etc。我需要为百分比宽度元素完成此操作。我觉得我已经尝试了一切，但必须有一个解决方案，即使它是一个 hack。到目前为止，我发现的最佳解决方案是使用hyphenator js。它适用于大多数长单词，除了它似乎只适用于可以在字典文件中找到的真实单词。例如，在我的所有示例中都很好地分解了这一点：

这是一个文本字符串，如果我正在使用连字符 json，那么这将与连字符很好地分开，一切都会好起来的

这样的事情不会被破坏，而是会破坏我的网站：

abababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababab

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

我想使用它的大多数网站都允许用户创建的文本出现在网站上，并且等号和连字符的长字符串很常见。我还注意到stackoverflow通过使用自动换行来解决这个问题：break-word; CSS（至少在Firefox中）。我对此进行了试验，发现它效果很好，但仅在使用预定义的像素宽度时才有效，我需要一个适用于百分比宽度的解决方案。我还使用了 word-wrap: break-all ，但它看起来很丑，因为它在应该换行时会在中间切断小词。

如果可能的话，我想继续使用连字符，因为它在大多数情况下都很好用。也许我已经看这个太久了，但是我可以设置连字符中的某种选项来分解像上面那些太大的非单词吗？也许有人通过调整连字符正则表达式来实现这一点取得了一些成功？

Answer 1

设置word-wrap: break（在技术意义上）也适用于百分比宽度，即使table-layout 已设置为fixed，对于单元格/列的百分比宽度的表格似乎也失败了。要解决这个问题，似乎有必要在内容中添加换行提示。

旧的换行提示是<wbr>，但现在一些浏览器存在问题。新的换行提示是零宽度空格字符，可以写成​ 或这样（使用UTF-8 时）；它在现代浏览器中运行良好，但会对旧版本的 IE 造成不良影响。这些天我倾向于投票给后者，但在我的line breaking issues 页面上，我解释说有一个“防弹”但尴尬的方法：使用<wbr><a class=wbr></a> 和CSS 规则.wbr:after { content: "\00200B"; }。当您以编程方式生成页面时，这种笨拙的标记可能是可行的。

您应该仅在需要时插入此类提示。它们不应该用于自然语言中的单词。作为一种简单的方法，当您处理用于在页面上呈现的用户输入时，您可以将其拆分为技术意义上的“单词”（最大非空白字符串），然后，对于每个长度超过 N 个字符的“单词”，插入一个任何 K 个字符后的换行提示。需要根据您的布局选择参数 N 和 K。缺点：这会导致“紧急中断”，就好像字符串包含空格但不包含空格一样，这也可能任意破坏长的自然语言单词。

也许您可以在客户端做一些事情，首先运行 Hyphenator.js，然后处理文本内容，以便您将文本内容拆分为任何空白和任何软连字符处的片段（\00AD；您需要确保只有在 Hyphenator.js 完成工作后才执行此操作）。然后你可以在片段上运行上面的算法，即为长片段添加换行提示。

Answer 2

还有比 Hyphenator 更新的 https://github.com/bramstein/hypher