css - 打散大字/防止打断布局/Hyphenator js

Question

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

这是一长串文本，如果我使用连字符 jsonthisthenit 会很好地与连字符分开，一切都会很好

像这样的东西不会被破坏，反而会破坏我的网站:

abababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababab

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

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

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

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 完成其工作后才能执行此操作)。然后你可以在片段上运行上面的算法，即给长片段添加换行提示。