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

Question

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

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

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

阿里巴巴

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

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

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

Answer 1

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

旧的换行提示是<wbr>，但现在一些浏览器存在问题。新的换行提示是零宽度空格字符，可以这样写​（使用 UTF-8 时）；它在现代浏览器中运行良好，但会对旧版本的 IE 造成不良影响。这些天我倾向于投票给后者，但在我的换行问题页面上，我解释说有一个“防弹”但尴尬的方法：使用 <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