web-dev-qa-db-ja.com

DIVでloooooong Wordで改行するにはどうすればいいですか？

さて、これは私を本当に混乱させています。私はそのようなdivの中にいくつかの内容があります：

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

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

</div>

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

内部のすべてのコンテンツに収まるように、必要に応じてブラウザにWordを強制的に「分割」させるにはどうすればよいですか。

htmlcssline-breaks
368
Nathan Osman

[Word-break: break-Word;]を使用

559
Chi

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

Word-break: break-all;

<wbr> tagも使えます

<wbr>（Word break）は、「必要に応じて、ブラウザで改行を挿入することができる」という意味です。ブラウザは改行が必要ないとは思わない。

114
rahul

これは、「クロスブラウザ」ソリューションに対する一般的な回答に追加される可能性があります。

出典：

CSS

.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;
}
92
Milche Patern

私はちょうど同じ問題をグーグルしていて、私の最終的な解決策を投稿しました _ here _。これもこの質問に関連しているので、再投稿を気にしないでください。

Word-wrap: break-Wordというスタイルを付けることで DIV を使えば簡単にこれを行うことができます（そしてその幅も設定する必要があるかもしれません）。

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 */
}

誰かに役立つことを願っています。

30
Simon East

&#8203;は、改行の機会を指定する目に見えない文字であるゼロ幅スペース（ZWSP）と呼ばれるUnicode文字のHTMLエンティティです。同様に、ハイフンの目的は、Wordの境界内で改行の機会を指定することです。

25
davidcondrey

Flex-boxを使用して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つ注意が必要なのは、テキストの間隔に&nbsp;を使用すると、Wordの途中で改行が発生する可能性があることです。

17
Andrew

_ css _ Word-wrap:break-Word;、 FireFox 3.6.3でテスト済み

7
Babiker

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

実装する：

    white-space: inherit;
    Word-break: break-Word;
5
Vineet Kumar Singh

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

display: table-caption;
5
Thadeu Esteves Jr.

_ mdn _ から：

overflow-wrap CSSプロパティは、テキストがコンテンツボックスからはみ出すのを防ぐために、ブラウザが単語内に改行を挿入するかどうかを指定します。

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

だからあなたが使用することができます：

overflow-wrap: break-Word;

使ってもいいですか ？

2
Shiva127

最初にあなたはあなたの要素の幅を特定するべきです。例えば：

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

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

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

2
Tran Nam Hung

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

.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>
1
TinhNQ