Apa perbedaan antara "word-break: break-all" versus "word-wrap: break-word" di CSS

397

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?

Tidur sebentar
sumber

Jawaban:

215

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.

AakashM
sumber
28
Perhatikan juga bahwa pembungkus kata adalah nama lama untuk properti "meluap-bungkus" yang lebih baru dalam spesifikasi. w3.org/TR/css3-text/#overflow-wrap
squareman
12
Sederhananya: " word-breakmenentukan peluang soft wrap antara huruf ..." Spesifikasi W3C menggunakan teks CLK sebagai contoh , tetapi itu bukan satu-satunya tujuan penggunaannya. Adalah umum untuk digunakan word-breakbersama dengan string panjang (seperti URL atau baris kode) ketika Anda ingin mereka memecah lebar kontainer - terutama jika kontainer adalah preelemen atau sel tabel di mana word-wrapproperti mungkin tidak berfungsi seperti yang diharapkan .
gfullam
1
Karena spek hanya menggunakan bahasa Asia sebagai contoh, bukan sebagai satu-satunya tujuan dari properti (seperti yang dijelaskan oleh Gfullam juga) yang tampaknya menjadi kesimpulan utama dari jawaban ini.
Shikkediel
3
word-wrap: break-word -> tidak akan memecahkan meja ---- word-break: break-semua -> istirahat tabel
Fernando Silva
1
Perhatikan bahwa link W3C yang @squareman disebutkan sekarang w3.org/TR/css-text-3/#overflow-wrap-property
Charles Wood
409

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.

Bhumi Singhal
sumber
28
Mengapa ini tidak diterima? Jawaban ini lebih bermanfaat bagi sebagian besar pengguna. Perilaku CJK hanya berlaku untuk situs web yang sangat internasional.
MarioDS
3
Jawaban singkat tapi manis! Meskipun Anda mungkin ingin mengubah bungkus kata menjadi bungkus berlebihan?
Gaurav Agarwal
5
@MarioDS itu berlaku untuk "situs web yang sangat internasional" atau, sebagaimana 20% dari dunia menyebutnya, "situs web"
fregante
1
@GauravAgarwal: harus dicatat bahwa IE (bahkan dalam versi terbaru) masih bergantung pada nama sebelumnya. Lihat caniuse.com/#search=overflow-wrap
Felix Wienberg
2
Lambang "jawaban yang diterima" terkait hanya untuk penanya, relevan untuk kebenaran jawaban ketika itu relevan dengan dirinya pada saat itu, itu saja. Pengguna tidak diharapkan untuk kembali ke pertanyaan mereka setelah beberapa tahun dan meninjau jawaban baru. Suara yang dihitung berdasarkan jawaban menunjukkan komunitas "jawaban yang diterima".
elpddev
98

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.
shuky
sumber
2
Apakah ini masih terjadi jika Anda menggunakan break-word. Saya menemukan bahwa itu mengganggu word-breakurl tapi tidak word-wrap. Keduanya menggunakan break-wordmendapatkannya dari css-tricks.com/snippets/css/…
Karthik T
44

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.
André Pena
sumber
4
Penjelasan yang bagus. Salah satu contoh yang saya temui tadi: kata-kata panjang dalam sel tabel. overflow-wrapSaya word-wraptidak membuat mereka membungkus. Agaknya karena sel-sel tabel tanpa lebar tetap bertambah alih-alih melimpah. Sebagai gantinya, meja menjadi lebar dan bertabrakan dengan elemen lain. word-breakdi sisi lain memperbaikinya.
Henrik N
@ HenrikN table-layout: fixed;(mungkin bersama-sama dengan width/ max-width) dapat membuatnya bekerja overflow-wrap/word-wraptetapi tergantung pada kasus penggunaan khusus; sama seperti word-breakmungkin bukan yang Anda inginkan.
phk
42

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.

masukkan deskripsi gambar di sini

demo jsfiddle .

Jon Schneider
sumber
5
Anda dapat menggunakan table-layout:fixeduntuk membuat tabel tidak meluas saat menggunakanword-wrap:break-work
veksen
@vesken Saya tidak bisa mengaktifkannya (di Firefox 26). Bisakah Anda memberikan versi terbaru dari jsfiddle saya yang ditautkan di atas untuk menunjukkan apa yang Anda maksud?
Jon Schneider
3
Saya membuatnya bekerja dengan menambahkan lebar di atas meja, baik 100%, atau memindahkan lebar kontainer 80px ke meja. Namun jsfiddle.net/SDGAX/37 Perilaku tabel tidak menggunakan yang samatable-layout:fixed
veksen
2
Perilaku ini juga terjadi ketika menggunakan word-wrapbersama dengan pretag di Firefox kecuali mereka memiliki lebar tetap yang ditentukan. Menggunakan word-breakmenghasilkan hasil yang diinginkan. Saya menautkan ke jawaban ini dalam komentar yang diposting di atas karena menunjukkan penggunaan umum.
gfullam
Juga elemen display-inline tanpa lebar tidak terpengaruh oleh "word-wrap", tetapi "word-break" masih berfungsi.
tfE
22

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.

Jonny Haynes
sumber
Terima kasih untuk ini karena saya sedang mencari perbedaan antara word-wrap& word-breakyang keduanya dapat memiliki nilaibreak-word
Chad
10

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

Drkawashima
sumber
Sangat dijelaskan. Contoh menunjukkan perbedaan yang sangat jelas. Ini harus menjadi jawaban yang diterima!
naitsirch
9

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>

Ehsan
sumber
8

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;
Serge Stroobandt
sumber
2

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

pengguna2619604
sumber