分手大字/防止打破布局/ Hyphenator js

Question

我已經看到並經歷了太多的頁面解釋相同的問題，並有各種成功。我想要做的是提出一種方法，我可以分解大量的單詞，以便通過擴展超出指定寬度的內容來解決table/div/etc等問題。我需要爲百分比寬度元素完成此操作。我覺得我已經嘗試了一切，但是必須有解決方案，即使它是一種破解。目前爲止我找到的最佳解決方案是使用hyphenator js。它對於大多數長單詞來說都非常漂亮，除了它似乎只能用於可以在字典文件中找到的真實單詞。例如，這是我所有的例子很好地打破了！

ThisisalongstringoftextandifIwasusinghyphenatorjsonthisthenitwouldbreakupnicelywithhyphensandeverythingwouldbegood

喜歡這些東西不要壞了，而是它打破了我的網站：

abababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababab

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

我想要使用它的大多數網站都允許用戶創建的文本出現在網站上，而諸如等號和連字符的長字符串等常見問題。我還注意到，stackoverflow通過使用word-wrap：break-word來解決這個問題; CSS（至少在Firefox中）。我已經嘗試過這一點，發現它效果很好，但只適用於使用預定義的像素寬度，而且我需要一個可以使用百分比寬度的解決方案。我也使用了單詞換行：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

還有https://github.com/bramstein/hypher比連字符更新