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?
Đối với bất kỳ độc giả nào trong tương lai, những người ban đầu có thể bối rối tại sao điều này bị đóng lại như một câu hỏi trùng lặp. Các CSS Tiêu đề Mô-đun Level 3 tiểu bang đó overflow-wrapvà word-wrapnên là 100% giống hệt nhau trong chức năng. Cá nhân tôi có ấn tượng rằng nó word-wrapchỉ nên được sử dụng cho hỗ trợ trình duyệt cũ và nó có thể không được dùng nữa hoặc bị loại bỏ trong phiên bản CSS trong tương lai.
Đối với những người đã bỏ phiếu để đóng điều này: đây không phải là một bản sao như đã nêu, câu hỏi không giống nhau. Bản sao bị cáo buộc là về hai giá trị cụ thể của hai thuộc tính và câu hỏi này là về hai thuộc tính. Tôi thực sự không thích việc một số người tin rằng có quyền cấm người khác trả lời câu hỏi. Nếu bạn không thích một câu hỏi, chỉ cần không đọc nó!
Tôi đồng ý với Hibou57. Đây không phải là một bản sao. Thật không may, nó đã đóng cửa vì rất khó để tìm câu trả lời cho câu hỏi này trực tuyến.
TylerCrompton Câu hỏi này không phải về word-wrap. Đây là về word-break. Đóng câu hỏi này là câu hỏi trùng lặp không có ý nghĩa.
Đã tìm thấy câu trả lời: “Đặc tả W3 nói về những điều này dường như gợi ý rằng word-break: break-all là để yêu cầu một hành vi cụ thể với văn bản CJK, trong khi word-wrap: break-word là từ chung chung hơn, không phải CJK- nhận thức, hành vi. ” ( stackoverflow.com/questions/1795109/… ) CJK là một thuật ngữ chung cho tiếng Trung, tiếng Nhật và tiếng Hàn.
Oh. nhưng tôi nghĩ câu hỏi của bạn hoàn toàn khác. Anyways, vui mừng bạn tìm thấy câu trả lời của bạn, và tôi tin tưởng tôi đã được sự giúp đỡ một chút
word-wrap là một tiện ích mở rộng đã lỗi thời của Microsoft (ngay cả khi nó đã được hầu hết các trình duyệt triển khai dưới dạng thuộc tính chưa được cố định) và hiện đã được thay thế bằng tràn-wrap. MDN đã hợp nhất hai trang khác nhau thành một trang duy nhất: developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
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.
Đang xem: Word wrap là gì, Định nghĩa word wrap là gì
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.
Xem thêm: Nghĩa Của Từ Tare Weight Là Gì ? Ý Nghĩa Của Tare Weight Trong Vận Tải
( 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?
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).
Xem thêm: Đẩy Mạnh Cho Vay Tiêu Dùng Là Gì ? Vay Tín Chấp Tiêu Dùng Là Gì
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
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
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).