teks mengalir keluar dari div

98

Ketika teks tanpa spasi dan lebih dari ukuran div 200px itu mengalir keluar Lebar didefinisikan sebagai 200px Saya telah meletakkan kode saya di sini http://jsfiddle.net/madhu131313/UJ6zG/ Anda dapat melihat gambar di bawah ini diedit : Saya ingin teks untuk pindah ke baris berikutnya

masukkan deskripsi gambar di sini

css border

— madhu131313
sumber

175

Itu karena Anda memiliki satu kata panjang tanpa spasi. Anda dapat menggunakan word-wrapproperti untuk menyebabkan teks rusak:

#w74 { word-wrap: break-word; }

Ini memiliki dukungan browser yang cukup baik juga. Lihat dokumentasi tentang itu di sini .

— chipcullen.dll
sumber

3

itu tidak bekerja untuk saya di sini adalah contoh lain.

— Deepak Vaishnav

Ini luar biasa, memecahkan beberapa masalah di halaman responsif

— yussan

Sungguh solusi yang bersih dan mudah. Terima kasih telah membagikannya.

— Dzenis H.

109

Menggunakan

white-space: pre-line;

Ini akan mencegah teks mengalir keluar dari div. Ini akan merusak teks saat mencapai akhir div.

— Nixon
sumber

28

Anda harus menggunakan overflow:hidden; atauscroll

http://jsfiddle.net/UJ6zG/1/

atau dengan php Anda bisa menyingkat kata-kata panjang ...

Keren. Maaf untuk menyebutkan saya ingin pergi ke baris berikutnya seperti obrolan gmail atau obrolan facebook :)

— madhu131313

Kemudian Anda dapat menggunakan versi @chipcullen dengan word-wrap! demo: jsfiddle.net/UJ6zG/3

8

Anda perlu menerapkan properti CSS berikut ke blok penampung (div):

overflow-wrap: break-word;

Menurut spesifikasinya (sumber CSS | MDN ):

The overflow-wrapmenspesifikasikan properti CSS apakah browser harus memasukkan jeda baris dalam kata-kata untuk mencegah teks dari meluap kotak isinya.

Dengan nilai disetel ke break-word

Untuk mencegah overflow, kata-kata yang biasanya tidak dapat dipecahkan dapat rusak pada titik yang berubah-ubah jika tidak ada titik putus yang dapat diterima di baris tersebut.

Layak disebut...

Properti ini awalnya merupakan ekstensi Microsoft yang tidak standar dan tidak diperbaiki word-wrap, dan diterapkan oleh sebagian besar browser dengan nama yang sama. Sejak itu telah diganti namanya menjadi overflow-wrap, dengan word-wrapmenjadi alias.

Jika Anda peduli dengan dukungan browser lama, ada baiknya menentukan keduanya:

word-wrap    : break-word;
overflow-wrap: break-word;

Ex. IE9 tidak mengenali overflow-wraptetapi berfungsi dengan baikword-wrap

— Paolo
sumber

Terima kasih, ini berhasil untuk saya. Anda menulis "Dengan nilai yang ditetapkan ke break-world" - Saya cukup yakin yang Anda maksud adalah "break-word" tanpa "l", saya harap Anda tidak bermaksud untuk menghancurkan dunia;)

— Jake Neumann

7

menggunakannya overflow:autoakan memberikan penggulung untuk teks Anda dalam div:).

— Rahul Razdan
sumber

4

Jika ini membantu. Tambahkan properti berikut dengan nilai ke pemilih Anda:

white-space: pre-wrap;

— Martin Lloyd Jose
sumber

2

Ini melakukan trik untuk saya:

{word-break: break-all; }

— Addo
sumber

1

terima kasih banyak ini adalah satu-satunya hal yang berhasil untuk saya (menggunakan komponen bergaya di React)

— mlz7

0

saya baru-baru ini mengalami ini. Saya menggunakan:display:block;

— arn-arn
sumber

-6

Jika itu hanya satu contoh yang perlu dibungkus di atas 2 atau 3 baris saya hanya akan menggunakan beberapa <wbr>dalam string. Ini akan memperlakukan mereka seperti <br>tetapi tidak akan memasukkan jeda baris jika tidak diperlukan.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

Ini biola.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/

— gaby de wilde
sumber