Apakah ada cara untuk membungkus kata-kata panjang dalam sebuah div?

173

Saya tahu Internet Explorer memiliki gaya bungkus kata, tetapi saya ingin tahu apakah ada metode lintas-browser untuk melakukannya dalam teks dalam div.

Lebih disukai CSS tetapi cuplikan JavaScript juga akan berfungsi baik.

sunting: Ya, mengacu pada string panjang, hai!

css html word-wrap

— Rutherford
sumber

7

Pembungkus kata terjadi secara default. Apakah yang Anda maksud pembungkus ketika ada tidak kata-kata yang terpisah?

— Quentin

313

Membaca komentar asli, rutherford mencari cara lintas-browser untuk membungkus teks yang tidak terputus (disimpulkan oleh penggunaan kata-bungkus untuk IE, yang dirancang untuk memecahkan string yang tidak terputus).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Saya telah menggunakan kelas ini sedikit sekarang, dan bekerja seperti pesona. (catatan: Saya baru diuji di FireFox dan IE)

— Aaron Bennett
sumber

Posting lama, tetapi tampaknya tidak memberikan spasi ketika IE dalam mode quirks.

— Jeremy

2

Saya menggunakan Firefox 24.6.0, dan word-wrap: break-wordinilah yang sebenarnya berhasil.

— user545424

3

Word-wrap: break-wordmeskipun dibuat oleh Microsoft sekarang adalah bagian dari standar CSS 3 dan apa triknya :-)

— Pascal_dher

38

Sebagian besar jawaban sebelumnya tidak berfungsi untuk saya di Firefox 38.0.5. Ini memang ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Dokumentasi:

— Paul Zahra
sumber

2

Terima kasih! ini adalah satu-satunya jawaban yang berhasil (kata-break: break-all; adalah yang berhasil bagi saya)

— DaniCE

14

white-space: pre-wrap

quirksmode.org/css/whitespace.html

— NVI
sumber

4

tautan mati. Harap berikan jawaban yang lebih menyeluruh.

— JoshYates1980

12

Solusi Aaron Bennet bekerja dengan baik untuk saya, tetapi saya harus menghapus baris ini dari kodenya -> white-space: -pre-wrap;karena itu memberikan kesalahan, jadi kode kerja terakhir adalah sebagai berikut:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Terima kasih banyak

— Hugo
sumber

1

Aaron Bennett menyebutkan jawaban yang sama 2 tahun sebelum Anda. apa yang Anda lakukan di sini tidak menambah nilai.

— AaA

6

Hai, seperti yang Anda lihat jika Anda membaca kedua jawaban lagi, apa yang saya katakan adalah bahwa solusi Harun baik-baik saja, tetapi saya mendapatkan kesalahan di salah satu baris yang ia tulis, jadi saya hanya mengubahnya ke solusi yang berfungsi untuk saya. Mungkin saya harus memiliki komentar dalam jawabannya, saya tahu itu, maaf & terima kasih

— Hugo

Saya harus menambahkan "white-space: -pre-wrap" ini dan berhasil :)

— Ravi Khambhati

0

Seperti yang disebutkan david, DIV memang membungkus kata-kata secara default.

Jika Anda merujuk pada string teks yang sangat panjang tanpa spasi, yang saya lakukan adalah memproses sisi server string dan memasukkan bentang kosong:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Ini tidak tepat karena ada masalah dengan ukuran font dan semacamnya. Opsi rentang bekerja jika wadah dalam ukuran variabel. Jika ini adalah kontainer dengan lebar tetap, Anda bisa melanjutkan dan memasukkan jeda baris.

— DA.
sumber

@ TomHert itu benar-benar aneh. Padahal, yah, IE. Tidak pernah berhasil. Yang mengatakan, ini diposting 5 tahun yang lalu. CSS3 sekarang memiliki beberapa opsi word-wrap yang lebih baik yang dapat mengakomodasi IE developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

— DA.

Ya saya tahu, saya hanya terkejut dengan kesederhanaan dari solusi ini sehingga saya harus mencobanya :)

— Tom Hert

0

Anda dapat mencoba menentukan lebar untuk div, apakah itu dalam pixel, persentase atau ems, dan pada saat itu div akan tetap menjadi lebar itu dan teks akan membungkus secara otomatis kemudian di dalam div.

— Slevin
sumber

Coba atur lebar 10px ... lalu gunakan kata yang lebih panjang dari 10px

— Paul Zahra