我已经看过并经历了太多的页面，解释了同样的问题并取得了各种成功。我想要做的是提出一种方法，我可以分解大词，以便它们不会通过拉伸超出指定宽度的内容来破坏table / divs / etc。我需要为百分比宽度元素完成此操作。我觉得我已经尝试了一切，但必须有一个解决方案，即使它是一个黑客。到目前为止，我找到的最佳解决方案是使用hyphenator js。它对大多数长词都很有效，除了它似乎只适用于可以在字典文件中找到的真实单词。例如，在我的所有例子中都很好地解析了这个问题：
ThisisalongstringoftextandifIwasusinghyphenatorjsonthisthenitwouldbreakupnicelywithhyphensandeverythingwouldbegood
这些事情不会被打破，而是会破坏我的网站：
abababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababab
= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = -
我想要使用此功能的大多数网站都允许用户创建的文本显示在网站上，并且诸如长字符串等号和连字符之类的内容很常见。我还注意到stackoverflow通过使用word-wrap来解决这个问题：break-word; css（至少在firefox中）。我已经对此进行了实验，发现它工作得很好，但只有在使用预定义像素宽度时才有效，我需要一个适用于百分比宽度的解决方案。我也使用了自动换行：break-all有效，但它看起来很难看，因为它会在中间切掉小字，而不应该把它包起来。
如果可能的话，我想继续使用连字符，因为它在大多数时候都很有效。也许我一直在看这个太久了，但是在连字符中是否有某种选项我可以设置它来分解像上面那些太大的非单词？也许有人在调整连字符正则表达式方面取得了一些成功，以实现这一目标？
答案 0 :(得分：2)
设置word-wrap: break对于百分比宽度也有效（在技术意义上），对于单元格/列的百分比宽度的表格似乎失败，即使table-layout已设置为{{1 }}。要解决此问题，似乎有必要在内容中添加换行提示。
旧的断行提示是fixed，但是现在有些浏览器存在问题。新的换行提示是ZERO WIDTH SPACE字符，可以写成<wbr>或者这样（当使用UTF-8时）;它在现代浏览器中运行良好，但会对旧版IE产生令人讨厌的影响。这些天我倾向于投票支持后者，但是在我line breaking issues的页面上，我解释说有一种“防弹”但又有尴尬的方法：使用​和CSS规则<wbr><a class=wbr></a>。以编程方式生成页面时，这种笨拙的标记可能是可行的。
您应该仅在需要时插入此类提示。它们不应该用于自然语言中的单词。作为一种简单的方法，当您处理用户输入以在页面上呈现时，您可以将其拆分为技术意义上的“单词”（最大非空白字符串），然后，对于长于N个字符的每个“单词”，插入一个在任何K个字符后断行提示。需要根据您的布局选择参数N和K.缺点：这会导致“紧急中断”，好像一个字符串包含一个空格但不包含空格，这也可以随意打破长自然语言单词。
也许您可以在客户端执行操作，首先运行Hyphenator.js，然后处理文本内容，以便将文本内容拆分为任何空格和任何软连字符的片段（.wbr:after { content: "\00200B"; };您需要确保只在Hyphenator.js完成其工作后才这样做）。然后，您可以在片段上运行上面的算法，即为长片段添加断行提示。
答案 1 :(得分：1)