Bagaimana cara memaksakan garis panjang dalam DIV?

Oke, ini benar-benar membingungkan saya. Saya memiliki beberapa konten di dalam div seperti:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Namun, konten meluap DIV (seperti yang diharapkan) karena 'kata' terlalu panjang.

Bagaimana saya bisa memaksa browser untuk 'memecah' kata di mana diperlukan agar sesuai dengan semua konten di dalamnya?

Menggunakan word-wrap:break-word;

Ia bahkan bekerja di IE6, yang merupakan kejutan yang menyenangkan.

word-wrap: break-wordtelah diganti dengan overflow-wrap: break-word;yang berfungsi di setiap browser modern. IE, sebagai browser yang mati, selamanya akan bergantung pada yang usang dan non-standar word-wrap.

Penggunaan yang ada word-wrapsaat ini masih berfungsi karena merupakan alias untuk overflow-wrapper spesifikasinya.

Saya tidak yakin tentang kompatibilitas browser

word-break: break-all;

Anda juga dapat menggunakan <wbr>tag

<wbr>(kata istirahat) berarti: "Browser dapat menyisipkan baris istirahat di sini, jika diinginkan." Kalau peramban tidak berpikir jeda baris yang diperlukan tidak ada yang terjadi.

Ini dapat ditambahkan ke jawaban yang diterima untuk solusi 'lintas-browser'.

Sumber:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-dari-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Saya hanya Googling masalah yang sama, dan memposting solusi terakhir saya DI SINI . Itu juga relevan dengan pertanyaan ini.

Anda dapat melakukan ini dengan mudah dengan div dengan memberikan gaya word-wrap: break-word(dan Anda mungkin perlu mengatur lebarnya juga).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Namun, untuk tabel , Anda juga perlu menerapkan: table-layout: fixed. Ini berarti lebar kolom tidak lagi cair, tetapi ditentukan berdasarkan lebar kolom pada baris pertama saja (atau melalui lebar yang ditentukan). Baca lebih lanjut di sini .

Kode sampel:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​adalah entitas HTML untuk karakter unicode yang disebut ruang lebar-nol (ZWSP) yang merupakan karakter tidak terlihat yang menentukan peluang jeda baris. Demikian pula tujuan tanda hubung adalah untuk menentukan peluang jeda baris dalam batas kata.

Menemukan bahwa menggunakan yang berikut ini berfungsi di sebagian besar browser utama (Chrome, IE, Safari iOS / OSX) kecuali Firefox (v50.0.2) ketika menggunakan flexbox dan mengandalkan width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Catatan: Anda mungkin perlu menambahkan awalan vendor browser jika Anda tidak menggunakan autoprefixer.

Hal lain yang harus diperhatikan adalah penggunaan teks  untuk spasi dapat menyebabkan jeda baris tengah kata.

CSS word-wrap:break-word; , diuji dalam FireFox 3.6.3

Saya memecahkan masalah saya dengan kode di bawah ini.

display: table-caption;

Hapus white-space: nowrap, jika ada.

Melaksanakan:

white-space: inherit;
word-break: break-word;

Spasi disimpan oleh browser. Teks akan membungkus bila perlu, dan on line istirahat

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Dari MDN :

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

Berbeda dengan word-break, overflow-wraphanya akan membuat jeda jika seluruh kata tidak dapat ditempatkan pada barisnya sendiri tanpa meluap.

Jadi Anda bisa menggunakan:

overflow-wrap: break-word;

Bisakah saya menggunakan ?

Pertama, Anda harus mengidentifikasi lebar elemen Anda. Misalnya:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

sehingga ketika teks mencapai lebar elemen, itu akan dipecah menjadi beberapa baris.

Seperti disebutkan dalam balasan @ davidcondrey, tidak hanya ZWSP, tetapi juga SHY ­ ­yang dapat digunakan dalam kata-kata yang sangat panjang dan terkonstruksi (pikirkan Jerman atau Belanda) yang harus dipatahkan di tempat yang Anda inginkan. Tidak terlihat, tetapi memberikan tanda hubung saat dibutuhkan, sehingga menjaga kedua kata terhubung dan baris terisi sepenuhnya.

Dengan cara itu kata luchthavenpolitieagent dapat dicatat sebagai lucht­haven­politie­agentbagian yang lebih panjang dari suku kata.
Meskipun saya tidak pernah membaca sesuatu yang resmi tentang hal itu, tanda hubung lunak ini berhasil mendapatkan prioritas yang lebih tinggi di browser daripada tanda hubung resmi dalam satu kata konstruksi ( jika mereka memiliki ekstensi untuk itu sama sekali).
Dalam praktiknya, tidak ada peramban yang mampu memecahkan kata yang panjang dan tersusun dengan sendirinya; pada layar yang lebih kecil sehingga menghasilkan baris baru untuk itu, atau dalam beberapa kasus bahkan satu kata-baris (seperti ketika dua dari kata-kata yang dibangun menindaklanjuti).

FYI: Bahasa Belanda untuk petugas polisi bandara

kata-istirahat: normal tampaknya lebih baik daripada menggunakan kata-istirahat: kata-istirahat karena istirahat-kata istirahat awal seperti EN

word-break: normal

Melakukan hal ini:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

coba saja ini dengan gaya kami

white-space: normal;