DIVの長い単語で改行を強制するにはどうすればよいですか？

わかりました、これは本当に私を混乱させます。私はdivの中にいくつかのコンテンツを持っています：

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

ただし、「単語」が長すぎるため、コンテンツはDIVをオーバーフローします（予想どおり）。

内部のすべてのコンテンツを収めるために必要な場合は、どうすればブラウザに単語を「分割」させることができますか？

使用する word-wrap:break-word;

IE6でも動作します。これは嬉しい驚きです。

word-wrap: break-wordoverflow-wrap: break-word;すべての最新のブラウザで動作するに置き換えられました。死んだブラウザであるIEは、word-wrap代わりに非推奨の非標準に永遠に依存します。

仕様によるword-wrapエイリアスであるため、今日の既存の使用は引き続き機能しoverflow-wrapます。

ブラウザの互換性がわかりません

word-break: break-all;

また、<wbr>タグを使用できます

<wbr>（ワードブレーク）は、「必要に応じて、ブラウザはここに改行を挿入する場合があります。」ブラウザが改行を必要としない場合、何も起こらない必要があります。

これは、「クロスブラウザ」ソリューションの承認済み回答に追加できます。

出典：

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

私は同じ問題をグーグルで調べていて、私の最終的な解決策をここに投稿しました。この質問にも関係があります。

スタイルを指定することで、divを使用してこれを簡単に行うことができますword-wrap: break-word（幅も設定する必要がある場合があります）。

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

ただし、テーブルの場合は、以下も適用する必要がありますtable-layout: fixed。つまり、列の幅は流動的ではなくなり、最初の行の列の幅のみに基づいて（または指定された幅を介して）定義されます。詳細はこちら。

サンプルコード：

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​ゼロ幅スペース（ZWSP）と呼ばれるUnicode文字のHTMLエンティティであり、改行の機会を指定する非表示の文字です。同様に、ハイフンの目的は、単語の境界内で改行する機会を指定することです。

flexboxを使用してに依存してwidth: autoいる場合、Firefox（v50.0.2）を除くほとんどの主要なブラウザー（Chrome、IE、Safari iOS / OSX）で以下を使用すると機能することがわかりました。

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

注：自動プレフィックスを使用していない場合は、ブラウザベンダーのプレフィックスを追加する必要がある場合があります。

もう1つの注意点は、テキスト にスペースを使用すると、単語の途中で改行が発生する可能性があることです。

CSS word-wrap:break-word;、FireFox 3.6.3でテスト済み

以下のコードで問題を解決しました。

display: table-caption;

削除する white-space: nowrapあればます。

実装：

white-space: inherit;
word-break: break-word;

空白はブラウザによって保持されます。テキストは必要に応じて折り返され、改行されます

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

デモ

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

MDNから：

overflow-wrapブラウザがそのコンテンツボックスをオーバーフローテキストを防ぐために、言葉の中に改行を挿入する必要があるか否かのCSSプロパティで指定。

とは対照的にword-break、overflow-wrapオーバーフローせずに単語全体を独自の行に配置できない場合にのみ、ブレークが作成されます。

だからあなたは使うことができます：

overflow-wrap: break-word;

使用できますか？

まず、要素の幅を特定する必要があります。例えば：

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

テキストが要素の幅に達すると、行に分割されます。

davidcondreyの返信@で述べたように、そこだけZWSPはないですが、またSHY ­ ­非常に長いで使用することができる、その場で壊れする必要が構築された単語（ドイツ語やオランダ語を考える）あなたはそれになりたいです。非表示ですが、必要なときにハイフンを使用できるので、単語の連結と行の塗りつぶしを最大限に維持できます。

このようにして、luchthavenpolitieagentlucht­haven­politie­agentという単語は、その単語の音節より長い部分を提供することに注意してください。
私はそれについて公式に何も読んだことはありませんが、これらのソフトハイフンは、構成要素の単一の単語の公式ハイフンよりもブラウザで高い優先順位を取得できます（拡張機能がある場合）。
実際には、このように長く構成された単語をそれ自体で破壊できるブラウザはありません。小さな画面では、新しい行が表示されたり、場合によっては1単語の行（構成された単語のうち2つが続く場合など）になることもあります。

参考：空港の警察官にとってはオランダ語です

word-break：word-break：break-wordよりも通常のほうが適しているように思われます。

word-break: normal

これを行う：

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

私たちのスタイルでこれを試してみてください

white-space: normal;