Şu anda ikisi arasındaki farkın ne olduğunu merak ediyorum. Her ikisini de kullandığımda, konteynere uymuyorsa kelimeyi kırıyor gibi görünüyor. Peki W3C bunu yapmak için neden iki yol yaptı?

Bu bahsediyor o W3 özelliklerini izlenimini bırakmaktadır word-break: break-alloysa CJK (Çince, Japonca ve Korece) metin ile belirli bir davranışı gerektiren içindir word-wrap: break-worddaha genel olmayan CJK-aware davranıştır.

word-wrap: break-word son zamanlarda olarak değiştirildi overflow-wrap: break-word

• uzun kelimeleri bir sonraki satıra sarar.
• farklı sözcükleri ortada kırılmayacak şekilde ayarlar.

word-break: break-all

• sürekli veya çok sayıda kelime olmasına bakılmaksızın, bunları genişlik sınırının kenarından ayırır. (yani aynı kelimenin karakterleri dahilinde bile)

Dolayısıyla, içeriği dinamik olarak alan birçok sabit boyutlu yayınız varsa word-wrap: break-word, yalnızca sürekli kelimeler arasında kırıldığı için kullanmayı tercih edebilirsiniz ve birçok kelime içeren bir cümle olması durumunda, boşluklar sağlam kelimeler alacak şekilde ayarlanır (bir sözcük içinde kesinti olmaz).

Ve eğer önemli değilse, ikisini de tercih edin.

İle word-break, başlaması gereken noktada çok uzun bir kelime başlar ve gerektiği kadar kırılır

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

Bununla birlikte word-wrap, çok uzun bir kelime başlaması gereken noktada BAŞLAMAYACAKTIR. sonraki satıra sarılır ve daha sonra gerektiği kadar kırılır

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

word-wrapoverflow-wrapmuhtemelen bu karışıklığı önlemek için yeniden adlandırıldı .

Şimdi elimizde bu var:

taşma-wrap

Taşma-wrap özelliği tarayıcı bir başka kırılmaz dize onun içeren kutuya sığmayacak kadar uzun olduğunda taşma önlemek için kelimelerin içinde satırlar kırabilir olsun veya olmasın belirtmek için kullanılır.

Olası değerler:

• normal : Satırların yalnızca normal sözcük kesme noktalarında kırılabileceğini gösterir.

• break-word : Satırda başka türlü kabul edilebilir kesme noktaları yoksa normal olarak kırılmaz kelimelerin rastgele noktalarda kırılabileceğini gösterir.

kaynak .

word-break

Word-break CSS özelliği kelimelerin içinde satırlar kırmaya belirtmek için kullanılır.

• normal : Varsayılan satır sonu kuralını kullanın.
• break-all : CJK olmayan (Çince / Japonca / Korece) metinler için herhangi bir karakter arasına sözcük sonları eklenebilir.
• keep-all : CJK metni için sözcük sonlarına izin verme. CJK olmayan metin davranışı normal ile aynıdır.

kaynak .

Şimdi sorunuza geri arasındaki temel fark taşma-sarma ve kelime-mola ilk olarak bir davranışı belirleyen olmasıdır taşma sonra üzerinde davranışını belirler iken, durumun normale durum (hayır taşma). Bir taşma kabı metni tutmak için yeterli alan yok olduğunda durum olur. Bu durumda çizgileri kırmak işe yaramaz çünkü boşluk yoktur (sabit genişlik ve yükseklikte bir kutu hayal edin).

Yani:

• overflow-wrap: break-word: Taşma durumunda kelimeleri kır.
• word-break: break-all: Normal bir durumda, satır sonundaki kelimeleri kır. Taşma gerekli değildir.

Bir öğedeki içeriğe uygulandığında en azından Firefox (v24 itibariyle) ve Chrome'da (v30 itibariyle) table:

word-wrap:break-word

aslında uzun kelimelerin sarılmasına neden olmaz, bu da tablonun kabının sınırlarını aşmasına neden olabilir;

word-break:break-all

olacak kelime sarma, ve bunun kabın içinde uydurma tabloda sonuçlanır.

jsfiddle demosu .

Tüm bulabildiğim. Eğer yardımcı olup olmadığından emin değilim, ama karışıma ekleyeceğimi düşündüm.

WORD-WRAP

Bu özellik, içerik bir öğe için belirtilen oluşturma kutusunun sınırını aşarsa geçerli oluşturulan satırın kesilip kesilmeyeceğini belirtir (bu, bazı açılardan 'klip' ​​ve 'taşma' özelliklerine benzerdir.) Bu özellik yalnızca uygulanmalıdır öğenin görsel bir sunumu varsa, açık yükseklik / genişliğe sahip bir satır içi öğedir, kesinlikle konumlandırılır ve / veya bir blok öğesidir.

WORD-BREAK

Bu özellik kelimeler içindeki satır kesme davranışını kontrol eder. Bir eleman içinde birden çok dilin kullanıldığı durumlarda özellikle kullanışlıdır.

Çok büyük bir fark var. break-alltemelde okunabilir metin oluşturmak için kullanılamaz.

Dize This is a text from an old magazine, her satıra yalnızca 6 karakter sığacak bir kapta olduğunu varsayalım .

word-break: break-all

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

Gördüğünüz gibi sonuç korkunç. break-allher satıra olabildiğince çok karakter sığdırmaya çalışacak, hatta "is" gibi 2 harfli bir kelimeyi 2 satıra bölecek! Bu saçmalık. Bu yüzden break-allnadiren kullanılır.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordyalnızca kaba sığmayacak kadar uzun kelimeleri kırar (8 dergi olan "dergi" gibi ve konteyner yalnızca 6 karaktere sığar). Konteynere tam olarak uyabilecek kelimeleri asla kırmayacak, bunun yerine onları yeni bir satıra itecektir.

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

kenarlığa devam etmek için kelime sonra satırsonu kırmak.

word-wrap:break-word :

İlk başta, satırsonu içindeki sözcük kaydırma daha sonra kenarlığa devam eder.

Misal :

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>

İlgili W3 spesifikasyonlarından - bağlam eksikliği nedeniyle oldukça belirsiz olan - aşağıdakileri çıkarabilir:

• word-break: break-all CJK (Çince, Japonca veya Korece) karakter yazılarında yabancı, CJK olmayan (Batı deyin) kelimeleri parçalamak içindir.
• word-wrap: break-word karışık olmayan (sadece Batı diyelim) bir dilde kelime kırma içindir.

En azından bunlar W3'ün niyetiydi. Aslında olan şey, sonuç olarak tarayıcı uyumsuzlukları ile büyük bir horoz oldu. İşte çeşitli sorunların mükemmel bir yazımı .

Aşağıdaki kod snippet'i, çapraz tarayıcı ortamında CSS kullanarak sözcük kaydırmanın nasıl gerçekleştirileceğinin bir özeti olabilir:

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

Önceki yorumlara ek olarak tarayıcı desteği için word-wrapolduğundan biraz daha iyi görünüyor word-break.