同じ問題を説明し、さまざまな成功を収めているページを何度も見てきました。私がやろうとしているのは、指定された幅を超えてコンテンツを拡大することで、テーブルやdivなどを壊さないように大きな単語を分割できる方法を考え出すことです。パーセント幅の要素に対してこれを行う必要があります。私はすべてを試したような気がしますが、それがハックであっても、解決策がなければなりません。私がこれまでに見つけた最善の解決策は、ハイフネーターjsを使用することです。辞書ファイルにある実際の単語でのみ機能するように見えることを除いて、ほとんどの長い単語で美しく機能します。たとえば、これは私のすべての例でうまく分割されています。
これはテキストの長い文字列であり、ハイフネーターを使用していた場合は、ハイフンでうまく分割され、すべてがうまくいくでしょう
これらのようなものは壊れることはなく、代わりに私のサイトを壊します：
abababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababab
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
これを使用したいほとんどのサイトでは、ユーザーが作成したテキストをサイトに表示できます。等号やハイフン文字の長い文字列などが一般的です。また、stackoverflowがword-wrap：break-word;を使用してこの問題に対処していることにも気づきました。css（少なくともFirefoxでは）。私はこれを実験して、それがうまく機能することを発見しましたが、事前定義されたピクセル幅を使用する場合にのみ機能し、パーセンテージ幅で機能するソリューションが必要です。私もword-wrap：break-allを使用しましたが、これは機能しますが、代わりに単語を折り返す必要があるときに途中で小さな単語を切り取るため、見栄えが悪くなります。
可能であれば、ハイフネーターはほとんどの場合うまく機能するので、引き続き使用したいと思います。たぶん私はこれをあまりにも長い間見てきましたが、ハイフネーターに、大きすぎる上記のような非単語を分割するように設定できる何らかのオプションがありますか？誰かがこれを実現するためにハイフネーターの正規表現を調整することに成功したのではないでしょうか。