Saat ini saya bertanya-tanya apa perbedaan antara keduanya. Ketika saya menggunakan keduanya, mereka tampaknya melanggar kata jika tidak pas wadah. Tetapi mengapa W3C membuat dua cara untuk melakukannya?

Spesifikasi W3 yang berbicara tentang ini tampaknya menyarankan bahwa word-break: break-alladalah untuk mensyaratkan perilaku tertentu dengan teks CJK (Cina, Jepang, dan Korea), sedangkan word-wrap: break-wordperilaku yang lebih umum, tidak-sadar-CJK.

word-wrap: break-word baru saja diubah menjadi overflow-wrap: break-word

• akan membungkus kata-kata panjang ke baris berikutnya.
• menyesuaikan kata-kata yang berbeda sehingga tidak pecah di tengah.

word-break: break-all

• terlepas dari apakah itu kata yang terus-menerus atau banyak kata, hancurkan di tepi batas lebar. (Yaitu bahkan dalam karakter dari kata yang sama)

Jadi, jika Anda memiliki banyak bentang ukuran tetap yang mendapatkan konten secara dinamis, Anda mungkin lebih suka menggunakan word-wrap: break-word, karena dengan cara itu hanya kata-kata kontinu yang terpecah di antara, dan jika itu adalah kalimat yang terdiri dari banyak kata, spasi disesuaikan untuk mendapatkan kata-kata utuh (tidak ada istirahat dalam sepatah kata pun).

Dan jika itu tidak masalah, pilihlah.

Dengan word-break, kata yang sangat panjang dimulai pada titik itu harus dimulai dan itu rusak selama diperlukan

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

Namun, dengan word-wrap, kata yang sangat panjang TIDAK AKAN mulai pada titik itu harus dimulai. itu membungkus ke baris berikutnya dan kemudian rusak selama diperlukan

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

word-wraptelah berganti nama menjadi overflow-wrapmungkin untuk menghindari kebingungan ini.

Sekarang inilah yang kita miliki:

overflow-wrap

Properti overflow-wrap digunakan untuk menentukan apakah browser dapat memecah baris dalam kata-kata untuk mencegah meluap ketika string yang tidak dapat dipecahkan terlalu panjang untuk dimasukkan ke dalam kotak yang berisi.

Nilai yang mungkin:

• normal : Mengindikasikan bahwa baris hanya dapat terputus pada titik pemutusan kata normal.

• break-word : Menunjukkan bahwa kata-kata yang biasanya tidak dapat dipecahkan dapat dipatahkan pada titik-titik arbitrer jika tidak ada titik istirahat yang dapat diterima dalam baris.

sumber .

istirahat

The word-break properti CSS digunakan untuk menentukan apakah akan mematahkan garis dalam kata-kata.

• normal : Gunakan aturan pemutusan jalur standar.
• break-all : Word break dapat dimasukkan di antara karakter apa pun untuk teks non-CJK (Cina / Jepang / Korea).
• keep-all : Jangan izinkan istirahat kata untuk teks CJK. Perilaku teks non-CJK sama dengan perilaku normal.

sumber .

Sekarang kembali ke pertanyaan Anda, perbedaan utama antara overflow-wrap dan word-break adalah bahwa yang pertama menentukan perilaku pada situasi overflow , sedangkan kemudian menentukan perilaku pada situasi normal (tidak ada overflow). Sebuah meluap situasi yang terjadi ketika wadah tidak memiliki cukup ruang untuk memegang teks. Mematahkan garis pada situasi ini tidak membantu karena tidak ada ruang (bayangkan sebuah kotak dengan lebar dan tinggi tetap).

Begitu:

• overflow-wrap: break-word: Pada situasi meluap, hancurkan kata-kata.
• word-break: break-all: Pada situasi normal, cukup pecahkan kata-kata di akhir baris. Overflow tidak diperlukan.

Setidaknya di Firefox (per v24) dan Chrome (per v30), saat diterapkan ke konten dalam tableelemen:

word-wrap:break-word

tidak akan benar-benar menyebabkan kata-kata panjang untuk membungkus, yang dapat menghasilkan tabel melebihi batas wadahnya;

word-break:break-all

akan menghasilkan kata pembungkus, dan meja pas di dalam wadahnya.

demo jsfiddle .

Hanya ini yang bisa saya temukan. Tidak yakin apakah itu membantu, tetapi saya pikir saya akan menambahkannya ke dalam campuran.

WORD-WRAP

Properti ini menentukan apakah baris yang diberikan saat ini harus diputus jika konten melebihi batas dari kotak render yang ditentukan untuk suatu elemen (ini mirip dalam beberapa hal dengan properti 'klip' ​​dan 'meluap' di maksud.) Properti ini hanya boleh berlaku jika elemen memiliki rendering visual, adalah elemen inline dengan tinggi / lebar eksplisit, benar-benar diposisikan dan / atau merupakan elemen blok.

WORD-BREAK

Properti ini mengontrol perilaku melanggar garis dalam kata-kata. Ini sangat berguna dalam kasus di mana banyak bahasa digunakan dalam suatu elemen.

Ada perbedaan besar . break-allpada dasarnya tidak dapat digunakan untuk rendering teks yang dapat dibaca.

Katakanlah Anda memiliki string This is a text from an old magazinedalam wadah yang hanya muat 6 karakter per baris.

word-break: break-all

This i
s a te
xt fro
m an o
ld mag
azine

Seperti yang Anda lihat hasilnya mengerikan. break-allakan mencoba memasukkan karakter sebanyak mungkin ke dalam setiap baris, bahkan akan membagi kata 2 huruf seperti "is" menjadi 2 baris! Itu konyol. Inilah sebabnya mengapa break-alljarang digunakan.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordhanya akan memecah kata-kata yang terlalu panjang untuk muat pada wadah (seperti "majalah", yaitu 8 karakter, dan wadah hanya muat 6 karakter). Itu tidak akan pernah merusak kata-kata yang bisa cocok dengan wadah secara keseluruhan, sebaliknya itu akan mendorong mereka ke baris baru.

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

word-break:break-all :

kata untuk terus berbatasan kemudian istirahat di baris baru.

word-wrap:break-word :

Pada awalnya, bungkus kata di baris baru kemudian terus ke perbatasan.

Contoh:

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

Dari spesifikasi W3 masing-masing — yang kebetulan sangat tidak jelas karena kurangnya konteks — dapat disimpulkan sebagai berikut:

• word-break: break-all adalah untuk memecah kata-kata asing, non-CJK (katakanlah Barat) dalam tulisan karakter CJK (Cina, Jepang atau Korea).
• word-wrap: break-word adalah kata melanggar dalam bahasa non-campuran (katakan saja semata-mata Barat).

Setidaknya, ini adalah niat W3. Apa yang sebenarnya terjadi adalah masalah besar dengan ketidakcocokan browser sebagai hasilnya. Berikut ini adalah tulisan yang sangat baik dari berbagai masalah yang terlibat .

Cuplikan kode berikut dapat berfungsi sebagai ringkasan tentang cara mencapai pembungkus kata menggunakan CSS di lingkungan lintas browser:

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

Selain dukungan browser komentar sebelumnya untuk word-wraptampaknya menjadi sedikit lebih baik daripada untuk word-break.