Bagaimana cara membungkus teks tanpa spasi di dalam <td>?

Saya telah menggunakan:

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

dan teks terbungkus di Chrome tetapi tidak di Firefox.

Pembaruan: Saya memutuskan untuk mengubah desain sehingga tidak perlu bungkusnya; mencoba menyelesaikan perbaikan / peretasan CSS terbukti terlalu membuat frustrasi dan memakan waktu.

Coba ini, saya pikir ini akan bekerja untuk sesuatu seperti "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGGG" akan menghasilkan

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Saya telah mengambil contoh saya dari beberapa situs web berbeda di Google. Saya telah menguji ini di ff 5.0, IE 8.0, dan Chrome 10.

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

Gunakan CSS3 word-wrap: break-word;. Bekerja di browser berbasis WebKit (Safari, Chrome) juga.

Pembaruan : Saya lupa, elemen yang dimaksud harus diposisikan secara implisit atau eksplisit sebagai elemen tetap atau ditampilkan sebagai elemen blok. Untuk sel tabel ( td), gunakan display: inline-block;.

Ini adalah versi lanjutan dari apa yang diminta OP.

Terkadang, yang terjadi adalah, klien kami ingin kami memberi '-' setelah jeda kata ke akhir baris.

Suka

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

istirahat ke

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Jadi, ada properti CSS baru jika didukung, biasanya didukung di browser terbaru.

.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;

}

Saya menggunakan yang ini.

Saya berharap seseorang akan memiliki permintaan seperti ini.

Untuk tata letak tabel otomatis, coba berikan gaya td yang bersangkutan dengan menggabungkan atribut max-width dan word-wrap.

Misalnya: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Diuji di Firefox 32, Chrome 37 dan IE11.

Anda dapat memasukkan spasi lebar nol (& # 8203;) secara manual untuk membuat break point.

Tetapkan lebar kolom untuk tdtag.

Saya pikir ini adalah masalah lama di Firefox, yang mengingatkan kembali pada Mozilla dan Netscape. Saya yakin Anda mengalami masalah dengan tampilan URL yang panjang. Saya pikir ini adalah masalah dengan mesin rendering daripada sesuatu yang dapat Anda perbaiki dengan CSS, tanpa beberapa peretasan yang buruk.

Masuk akal untuk mengubah desain.

Ini tampak penuh harapan: http://hacks.mozilla.org/2009/06/word-wrap/

Saya menggunakan Angular untuk proyek saya, dan berhasil menyelesaikan ini dengan filter sederhana:

Template:

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

Saring:

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

Anda tidak dapat melihatnya, tetapi setelah $1ada spasi yang tidak terlihat (terima kasih @kingjeffrey atas tipnya), yang mengaktifkan jeda kata untuk sel tabel.

Salah satu cara yang sedikit hack untuk melakukan ini adalah dengan memproses teks untuk menambahkan spasi di antara setiap huruf. Ganti spasi dengan  Kemudian gunakan atribut css spasi-huruf untuk menurunkan spasi.

Saya tahu, ini adalah retasan ... tetapi jika TIDAK ADA yang berfungsi, itu harus dibungkus tanpa masalah.