[解決済み] 長い単語でdivが壊れないようにするには？

質問

TABLE-layoutからDIV-layoutに変更してから、ある共通の問題が残っています。

問題点 : DIV を動的テキストで埋めると、必然的に超長い単語が div カラムの端からはみ出し、あなたのサイトをプロらしくないものにしてしまうことがあります。

レトロウィニング : この 決して は、テーブルレイアウトでは起こりませんでした。テーブル セルは常に、最も長い単語の幅まできれいに拡張されます。

重要度（SEVERITY : 特にドイツ語のサイトでは、"speed limit" のような一般的な単語でさえ非常に長い ("Geschwindigkeitsbegrenzung") のが見られます。

どなたか、これに対する実行可能な解決策をお持ちではないでしょうか。

どのように解決するのですか？

ソフトハイフン

ソフトハイフンを挿入することで、長い単語をどこで分割するかをブラウザに伝えることができます ( ­ ):

averyvery­longword

のように表示されるかもしれません。

エイブリーロングワード

または

エイブリー

長文

正規表現を使えば、必要なとき以外は挿入しないようにすることができます。

/([^\s-]{5})([^\s-]{5})/ → $1­$2

ブラウザと検索エンジンはテキストを検索するときにこの文字を無視するほど賢く、ChromeとFirefox（他は未検証）はテキストをクリップボードにコピーするときにこの文字を無視します。

<wbr> 要素

もう一つの選択肢は <wbr> を注入することです。 IEイズム であったものが、現在では になっています。 :

averyvery<wbr>longword

ハイフン無しで改行する。

エイブリー

長文

ゼロ幅の空白文字で同じことが実現できる ​ (または &#x200B ).

参考までに、次のようなものもあります。 CSS hyphens: auto 最新の IE、Firefox、Safari でサポートされている ( に対応していますが、現在のところ Chrome には対応していません。 ):

div.breaking {
  hyphens: auto;
}

しかし、このハイフネーションはハイフネーション辞書に基づいており、長い単語を分割することが保証されているわけではありません。しかし、それは正当化されたテキストをより美しくすることができます。

レトロワイニングの解決策

<table> をレイアウトに使うのは良くないですが display:table はダメですが、他の要素では大丈夫です。昔ながらのテーブルのように風変わりな（そして伸びやかな）ものになります。

div.breaking {
   display: table-cell;
}

overflow そして white-space: pre-wrap などの回答も良いですね。