<td>内に空白のないテキストを折り返すにはどうすればよいですか？

私が使用した：

word-break:break-all;
table-layout:fixed;

テキストはChromeで折り返されますが、Firefoxでは折り返されません。

更新：ラップが不要になるようにデザインを変更することにしました。CSSの修正/ハックを整理しようとすると、イライラし、時間がかかりすぎることがわかりました。

これを試してみてください、これは「AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG」のようなもので機能すると思います

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

私はグーグルのいくつかの異なるウェブサイトから私の例を取りました。私はこれをff5.0、IE 8.0、およびChrome10でテストしました。

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

CSS3を使用しword-wrap: break-word;ます。WebKitベースのブラウザ（Safari、Chrome）でも動作します。

更新：忘れましたが、問題の要素は、暗黙的または明示的に固定要素として配置するか、ブロック要素として表示する必要があります。テーブルセル（td）には、を使用しますdisplay: inline-block;。

これはOPが尋ねたものの高度なバージョンです。

時々、私たちのクライアントは、単語の区切りの後に行末まで「-」を付けてほしいと言っています。

お気に入り

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

にブレーク

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

そのため、サポートされている場合は新しいCSSプロパティがあり、通常は最新のブラウザでサポートされています。

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

私はこれを使っています。

誰かがこのような需要を持っていることを願っています。

自動テーブルレイアウトの場合は、属性max-widthとword-wrapを組み合わせて関連するtdのスタイルを設定してみてください。

例えば： <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Firefox 32、Chrome 37、IE11でテスト済み。

ゼロ幅スペース（＆＃8203;）を手動で挿入して、ブレークポイントを作成できます。

tdタグの列幅を設定します。

これはFirefoxの長年の問題であり、MozillaとNetscapeを思い起こさせると思います。長いURLの表示に問題があったに違いありません。醜いハックなしでCSSで修正できるものではなく、レンダリングエンジンの問題だと思います。

デザインを変更するのは理にかなっています。

しかし、これは希望に満ちているように見えました：http：//hacks.mozilla.org/2009/06/word-wrap/

私はプロジェクトにAngularを使用しており、単純なフィルターでこれを解決することができました。

テンプレート：

<td>{{string | wordBreak}}</td>

フィルタ：

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

あなたはそれを見ることができません$1が、目に見えないスペースがあった後（ヒントを@kingjeffreyに感謝します）、それはテーブルセルの単語区切りを可能にしました。

これを行うための少しハックな方法の1つは、テキストを処理して各文字の間にスペースを追加することです。スペースを次のように置き換えます。 次に、文字間隔のcss属性を使用してスペースを下げます。

私は知っています、それはハックです...しかし、他に何も機能しない場合は、問題なくラップするはずです。