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

Jawaban:

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