Tôi hiện đang tự hỏi sự khác biệt giữa hai là gì. Khi tôi sử dụng cả hai dường như phá vỡ từ nếu nó không phù hợp với container. Nhưng tại sao W3C lại thực hiện hai cách để làm điều đó?

Đặc tả W3 nói về những điều này dường như gợi ý rằng word-break: break-allcần phải có một hành vi cụ thể với văn bản CJK (Trung Quốc, Nhật Bản và Hàn Quốc), trong khi đó word-wrap: break-wordlà hành vi chung hơn, không nhận thức về CJK.

word-wrap: break-word gần đây đã đổi thành overflow-wrap: break-word

• sẽ gói những từ dài lên dòng tiếp theo.
• điều chỉnh các từ khác nhau để chúng không bị vỡ ở giữa.

word-break: break-all

• không phân biệt đó là một từ liên tục hay nhiều từ, phá vỡ chúng ở rìa giới hạn chiều rộng. (tức là ngay cả trong các ký tự của cùng một từ)

Vì vậy, nếu bạn có nhiều nhịp có kích thước cố định có nội dung động, bạn có thể chỉ thích sử dụng word-wrap: break-word, vì theo cách đó, chỉ các từ liên tục bị ngắt ở giữa và trong trường hợp đó là một câu bao gồm nhiều từ, khoảng trắng được điều chỉnh để có được các từ nguyên vẹn (không nghỉ trong một từ).

Và nếu nó không thành vấn đề, hãy chọn một trong hai.

Với word-break, một từ rất dài bắt đầu tại điểm nó sẽ bắt đầu và nó đang bị phá vỡ miễn là cần thiết

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

Tuy nhiên, với word-wrap, một từ rất dài S NOT KHÔNG bắt đầu tại điểm nó sẽ bắt đầu. nó quấn đến dòng tiếp theo và sau đó bị phá vỡ miễn là cần thiết

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

word-wrapđã được đổi tên thành overflow-wrapcó lẽ để tránh sự nhầm lẫn này.

Bây giờ đây là những gì chúng ta có:

bọc tràn

Thuộc tính overflow-quấn được sử dụng để xác định xem trình duyệt có thể ngắt dòng trong các từ để ngăn tràn hay không khi một chuỗi không thể phá vỡ khác quá dài để khớp với hộp chứa của nó.

Những giá trị khả thi:

• bình thường : Cho biết các dòng chỉ có thể ngắt tại các điểm ngắt từ bình thường.

• break-word : Chỉ ra rằng các từ thông thường không thể phá vỡ có thể bị phá vỡ tại các điểm tùy ý nếu không có điểm ngắt nào được chấp nhận trong dòng.

nguồn .

ngắt từ

Các từ-break thuộc tính CSS được sử dụng để xác định xem có nên phá vỡ dòng trong lời nói.

• bình thường : Sử dụng quy tắc ngắt dòng mặc định.
• break-all : Từ ngắt có thể được chèn giữa bất kỳ ký tự nào cho văn bản không phải là CJK (tiếng Trung / tiếng Nhật / tiếng Hàn).
• keep-all : Không cho phép ngắt từ cho văn bản CJK. Hành vi văn bản không phải của CJK giống như đối với bình thường.

nguồn .

Bây giờ trở lại câu hỏi của bạn, sự khác biệt chính giữa tràn-wrap và từ-break là người đầu tiên xác định hành vi trên một tràn tình hình, trong khi sau đó xác định hành vi trên một bình thường tình huống (không tràn). Một tình huống tràn xảy ra khi container không có đủ không gian để giữ văn bản. Việc ngắt dòng trong tình huống này không giúp ích gì vì không có khoảng trống (hãy tưởng tượng một hộp có chiều rộng và chiều cao cố định).

Vì thế:

• overflow-wrap: break-word: Trên một tình huống tràn, phá vỡ các từ.
• word-break: break-all: Trong một tình huống bình thường, chỉ cần ngắt các từ ở cuối dòng. Một tràn là không cần thiết.

Ít nhất là trong Firefox (kể từ v24) và Chrome (kể từ v30), khi được áp dụng cho nội dung trong một tablephần tử:

word-wrap:break-word

sẽ không thực sự gây ra các từ dài để bọc, điều này có thể dẫn đến bảng vượt quá giới hạn của thùng chứa của nó;

word-break:break-all

sẽ dẫn đến việc gói từ và bảng phù hợp trong thùng chứa của nó.

bản demo jsfiddle .

Đây là tất cả những gì tôi có thể tìm hiểu. Không chắc nó có giúp ích gì không, nhưng tôi nghĩ tôi sẽ thêm nó vào hỗn hợp.

WORD-WRAP

Thuộc tính này chỉ định xem dòng kết xuất hiện tại có bị phá vỡ hay không nếu nội dung vượt quá ranh giới của hộp kết xuất được chỉ định cho một phần tử (điều này tương tự theo cách nào đó với các thuộc tính 'clip' và 'tràn' trong mục đích này.) Thuộc tính này chỉ nên áp dụng nếu phần tử có kết xuất trực quan, là phần tử nội tuyến có chiều cao / chiều rộng rõ ràng, được định vị tuyệt đối và / hoặc là phần tử khối.

WORD-BREAK

Thuộc tính này kiểm soát hành vi ngắt dòng trong các từ. Nó đặc biệt hữu ích trong trường hợp nhiều ngôn ngữ được sử dụng trong một phần tử.

Có một sự khác biệt rất lớn . break-allvề cơ bản là không thể sử dụng để hiển thị văn bản có thể đọc được.

Giả sử bạn đã có chuỗi This is a text from an old magazinetrong một thùng chứa chỉ phù hợp với 6 ký tự mỗi hàng.

word-break: break-all

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

Như bạn có thể thấy kết quả là khủng khiếp. break-allsẽ cố gắng ghép càng nhiều ký tự vào mỗi hàng càng tốt, thậm chí nó sẽ chia một từ có 2 chữ cái như "is" thành 2 hàng! Thật là nực cười. Đây là lý do tại sao break-allhiếm khi được sử dụng.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordsẽ chỉ ngắt các từ quá dài để phù hợp với thùng chứa (như "tạp chí", có 8 ký tự và thùng chứa chỉ phù hợp với 6 ký tự). Nó sẽ không bao giờ phá vỡ các từ có thể phù hợp với toàn bộ container, thay vào đó nó sẽ đẩy chúng sang một dòng mới.

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

từ để tiếp tục biên giới sau đó phá vỡ trong dòng mới.

word-wrap:break-word :

Lúc đầu, từ bọc trong dòng mới sau đó tiếp tục viền.

Thí dụ :

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>

Từ các thông số kỹ thuật tương ứng của W3, người mà tình cờ khá không rõ ràng do thiếu bối cảnh, người ta có thể suy ra những điều sau đây:

• word-break: break-all là để phá vỡ các từ nước ngoài, không phải là CJK (nói tiếng Tây) trong các tác phẩm của nhân vật CJK (Trung Quốc, Nhật Bản hoặc Hàn Quốc).
• word-wrap: break-word là để phá vỡ từ trong một ngôn ngữ không hỗn hợp (chúng ta chỉ nói tiếng Tây).

Ít nhất, đây là những ý định của W3. Điều thực sự đã xảy ra là một kết quả lớn với sự không tương thích của trình duyệt. Dưới đây là một bài viết tuyệt vời về các vấn đề khác nhau liên quan .

Đoạn mã sau đây có thể đóng vai trò là bản tóm tắt về cách đạt được gói từ bằng CSS trong môi trường trình duyệt chéo:

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

Ngoài các bình luận trước đây, trình duyệt hỗ trợ word-wrapdường như tốt hơn một chút so với word-break.