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

89

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.

css

— FunLovinCoder
sumber

202

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>

— Stirling
sumber

10

Aduh!! Ini akan memaksa melanggar kata APA PUN pada titik yang sewenang-wenang bahkan saat tidak diperlukan. Apakah ada solusi untuk memiliki kata-kata istirahat ini HANYA ketika diperlukan untuk tidak melebihi lebar wadah? Artinya, agar berfungsi dengan cara "word-wrap: break-wird" seharusnya berfungsi jika bukan buggy?

— matteo

1

@matteo jawaban ini bekerja lebih baik untuk saya karena alasan itu: stackoverflow.com/a/18706058/234132

— dochoffiday

2

Masalah pemutusan word-break: break-word;

— paksa

1

Saya mendaftar untuk stack overflow hanya untuk seperti ini

— falky

24

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

— BalusC
sumber

1

Saya mencoba keduanya (secara terpisah), tetapi sayangnya mereka mengacaukan format tabel dengan cukup buruk.

— FunLovinCoder

Saya buruk, gunakan display: inline-block;.

— BalusC

13

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.

— Rahul
sumber

11

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.

— XDM
sumber

Saya tidak mengerti mengapa, tapi itu hanya bekerja dengan max-width, dan tidak dengan width. Meskipun demikian solusi terbaik bagi saya, karena tidak memecah kata-kata pada titik sembarangan.

— Raziel

Juga menjengkelkan bahwa persentase tidak berfungsi

— yfeleke

4

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

— kingjeffrey
sumber

1

Ada juga tag HTML non-standar <wbr>[untuk "jeda kata"]. Berikut adalah dukungan browser untuk ini dan solusinya: quirksmode.org/oddsandends/wbr.html

— kingjeffrey

3

Tetapkan lebar kolom untuk tdtag.

— Katak Hitam
sumber

0

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/

— dunxd
sumber

0

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.

— Jeffrey Roosendaal
sumber

-1

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.

— Armstrongest
sumber

2

Ini sangat hacky, jadi mengganggu pengindeksan yang benar dan sangat sulit untuk diterapkan seharusnya tidak menjadi jawaban sama sekali :-)

— Capsule