Sự khác biệt giữa tràn gói và ngắt từ?

Question 1

Sự khác biệt chính xác giữa overflow-wrap/ word-wrapvà là word-breakgì? Và ai đó có thể cho tôi biết cái nào là tốt hơn để phá vỡ các liên kết rất dài không? Hầu hết mọi người nói rằng bạn nên sử dụng ngắt từ kết hợp với overflow-wrapnhưng nó trông không hợp lý lắm. Tôi nghĩ rằng sử dụng overflow-wrapkết hợp với word-wrapđể hỗ trợ nhiều trình duyệt tốt hơn là phương pháp tốt nhất. Bạn nghĩ sao?

Question 2

Trích dẫn từ nguồn

word-wrap: Thuộc tính word-wrap CSS được sử dụng để chỉ định liệu trình duyệt có thể ngắt dòng trong các từ hay không để ngăn tràn khi một chuỗi không thể ngắt được quá dài để vừa trong hộp chứa của nó.
tràn-wrap : thuộc word-wraptính đã được đổi tên overflow-wraptrong bản nháp hiện tại của đặc tả Văn bản CSS3
ngắt từ: Thuộc tính CSS ngắt từ được sử dụng để chỉ định cách (hoặc nếu) ngắt dòng trong các từ

Vì vậy, bạn cần ngắt từ kết hợp với ngắt từ, đó là cách kết hợp phù hợp.

Question 3

Nó giúp hiểu rằng tại thời điểm này, word-break: break-wordthực sự là một bí danh cho overflow-wrap: anywhere.

word-break: break-wordchính thức không được dùng nữa; xem Dự thảo làm việc của Mô-đun Văn bản CSS Cấp 3 :

Để tương thích với nội dung cũ, thuộc word-breaktính cũng hỗ trợ break-wordtừ khóa không dùng nữa . Khi được chỉ định, điều này có tác dụng giống như word-break: normalvà overflow-wrap: anywhere, bất kể giá trị thực của thuộc tính tràn-bọc là gì.

Điều cần lưu ý ở đây là word-break: break-wordbí danh cho overflow-wrap: anywhere, KHÔNG phải bí danh cho overflow-wrap: break-word.

( word-break: normalchỉ là giá trị mặc định cho word-break, vì vậy bạn có thể bỏ qua nó trừ khi bạn đang đặt một giá trị khác cho word-break.)

Làm thế nào để làm overflow-wrap: anywherevà overflow-wrap: break-wordkhác nhau?

Sự khác biệt duy nhất trong tài liệu giữa hai tài liệu là overflow-wrap: anywhereKHÔNG "xem xét các cơ hội bọc mềm được giới thiệu bởi ngắt từ" khi nó là "tính toán kích thước nội tại của nội dung tối thiểu", trong khi overflow-wrap: break-wordKHÔNG.

Tôi đoán chiều rộng có thể chính xác hơn trong một số trường hợp nếu nó đang xem xét chúng?

Question 4

Dưới đây là sự khác biệt chính xác: (dựa trên thử nghiệm trong Chrome v81 và xác nhận quan sát của tôi bằng cách tham khảo thông số kỹ thuật)

khoảng trắng

normal(mặc định): thu gọn chuỗi khoảng trắng và ngắt dòng; thêm ngắt dòng khi cần thiết
nowrap: thu gọn chuỗi khoảng trắng và ngắt dòng; không thêm dấu ngắt dòng
pre-line: thu gọn chuỗi khoảng trắng; thêm ngắt dòng khi cần thiết
pre-wrap: không thu gọn; thêm ngắt dòng nếu cần
break-spaces: giống như pre-wrap, ngoại trừ khoảng trắng có thể kích hoạt thêm ngắt dòng
pre: không thu gọn; không thêm dấu ngắt dòng

Lưu ý: Nếu white-spacegiá trị đã chọn liệt kê "không thêm ngắt dòng", thì hành vi ngắt dòng của các thuộc tính sau sẽ không thể được áp dụng (tức là bị bỏ qua).

ngắt lời

normal(mặc định): ngắt dòng ở cuối từ phù hợp cuối cùng trong vùng chứa [nếu tồn tại], ngắt dòng khác không bị gián đoạn
break-word: ngắt dòng ở cuối từ phù hợp cuối cùng trong vùng chứa [nếu tồn tại], khác ở cuối vùng chứa
break-all: ngắt dòng tại cuối vùng chứa [có thể tách một từ, ngay cả với khoảng trắng gần đó]

tràn-bọc (tên kế thừa: word-wrap)

normal(mặc định): ngắt dòng ở cuối từ phù hợp cuối cùng trong vùng chứa [nếu tồn tại], ngắt dòng khác không bị gián đoạn
break-word: ngắt dòng ở cuối từ phù hợp cuối cùng trong vùng chứa [nếu tồn tại], khác ở cuối vùng chứa [nếu không -flex container], dòng khác không bị gián đoạn
anywhere: ngắt dòng ở cuối từ phù hợp cuối cùng trong vùng chứa [nếu tồn tại], khác ở cuối vùng chứa [tương tự như word-break: break-word]

Lưu ý rằng đối với overflow-wrap: break-word(đối với bất kỳ sự kết hợp nào để lại các dòng quá dài đối với vùng chứa), đường thẳng không bị đứt đoạn có thể làm cho vùng chứa flex giãn ra vượt quá tỷ lệ flex được chỉ định (buộc các vùng chứa flex khác phải co lại để tính đến nội dung quá dài).