Các overflow-wrapbất động sản trong CSS cho phép bạn xác định rằng trình duyệt có thể phá vỡ một dòng văn bản bên trong phần tử mục tiêu vào nhiều dòng ở một nơi khác không thể phá vỡ. Điều này giúp tránh một chuỗi văn bản dài bất thường gây ra các vấn đề về bố cục do tràn.
.example ( overflow-wrap: break-word; )Giá trị
normal: mặc định. Trình duyệt sẽ ngắt dòng theo quy tắc ngắt dòng thông thường. Các từ hoặc chuỗi không bị đứt đoạn sẽ không bị vỡ, ngay cả khi chúng tràn vùng chứa.break-word: các từ hoặc chuỗi ký tự quá lớn để vừa bên trong vùng chứa của chúng sẽ bị đứt ở một vị trí tùy ý buộc phải ngắt dòng. Một ký tự gạch nối sẽ không được chèn, ngay cả khi thuộchyphenstính được sử dụng.inherit: phần tử được nhắm mục tiêu phải kế thừa giá trị của thuộcoverflow-wraptính được xác định trên phần tử gốc trực tiếp của nó.
Bản trình diễn bên dưới có nút bật tắt cho phép bạn chuyển đổi giữa normalvà break-word.
Xem bản trình diễn viết tràn / bọc chữ của Louis Lazaris (@impressionwebs) trên CodePen.
Để chứng minh vấn đề overflow-wrapcố gắng giải quyết, bản trình diễn sử dụng một từ dài bất thường bên trong một thùng chứa tương đối nhỏ. Khi bạn bật break-word, từ sẽ bị ngắt quãng để phù hợp với khoảng trống nhỏ có sẵn, như thể từ đó là nhiều từ.
Một chuỗi ký tự khoảng trắng không ngắt ( ) sẽ được xử lý theo cùng một cách và cũng sẽ ngắt tại một vị trí thích hợp.
overflow-wraphữu ích khi áp dụng cho các phần tử chứa nội dung do người dùng tạo chưa được kiểm duyệt (như phần nhận xét). Điều này có thể ngăn các URL dài và các chuỗi văn bản không bị đứt đoạn khác (ví dụ: phá hoại) phá vỡ bố cục của trang web.
Điểm tương đồng với word-breaktài sản
overflow-wrapvà word-breakhành xử rất giống nhau và có thể được sử dụng để giải quyết các vấn đề tương tự. Tóm tắt cơ bản về sự khác biệt, như được giải thích trong đặc tả CSS là:
overflow-wrapthường được sử dụng để tránh sự cố với các chuỗi dài gây ra bố cục bị hỏng do văn bản chảy bên ngoài vùng chứa.word-breakchỉ định cơ hội bọc mềm giữa các chữ cái thường được kết hợp với các ngôn ngữ như tiếng Trung, tiếng Nhật và tiếng Hàn (CJK).
Sau khi mô tả các ví dụ về cách word-breakcó thể được sử dụng trong nội dung CJK, thông số kỹ thuật cho biết: “Để chỉ cho phép các cơ hội ngắt bổ sung trong trường hợp tràn, hãy xem overflow-wrap“.
Từ đó, chúng tôi có thể phỏng đoán rằng cách nào word-breakđược sử dụng tốt nhất với nội dung không phải tiếng Anh yêu cầu các quy tắc ngắt từ cụ thể và có thể xen kẽ với nội dung tiếng Anh, đồng thời overflow-wrapnên được sử dụng để tránh bố cục bị hỏng do các chuỗi dài, bất kể ngôn ngữ được sử dụng .
word-wrapTài sản lịch sử
overflow-wraplà tên tiêu chuẩn cho tiền thân của nó, word-wraptài sản. word-wrapban đầu là một tính năng độc quyền chỉ dành cho Internet Explorer, cuối cùng được hỗ trợ trong tất cả các trình duyệt mặc dù không phải là một tiêu chuẩn.
word-wrapchấp nhận các giá trị giống như overflow-wrapvà hoạt động theo cùng một cách. Theo thông số kỹ thuật, các trình duyệt "phải được coi word-wraplà tên thay thế cho thuộc overflow-wraptính, như thể nó là cách viết tắt của overflow-wrap". Ngoài ra, tất cả các tác nhân người dùng được yêu cầu hỗ trợ word-wrapvô thời hạn, vì những lý do cũ.
Cả hai overflow-wrapvà word-wrapsẽ vượt qua xác thực CSS miễn là trình xác thực được đặt để kiểm tra so với CSS3 trở lên (hiện tại là mặc định).
Có liên quan
- ngắt lời
- dấu gạch ngang
- khoảng trắng
- Xử lý các từ và URL dài
Thêm thông tin
- Word-Wrap: Thuộc tính CSS3 hoạt động trong mọi trình duyệt
- Gói tràn trên W3C
- Thảo luận về Tràn ngăn xếp trên
word-breakvs.overflow-wrap
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Hỗ trợ "một phần" được nêu ở trên là do các trình duyệt cũ hơn hỗ trợ word-wrapnhưng không overflow-wrap. Sử dụng cả hai có thể đảm bảo khả năng tương thích ngược.
Phiên bản nháp của trình soạn thảo của đặc tả W3C bao gồm một giá trị mới được gọi là giá trị break-spacesliên quan đến các chuỗi ký tự khoảng trắng “được bảo toàn”. Không có trình duyệt nào hỗ trợ cho tính năng này và nó không được bao gồm trong phiên bản dự thảo hoạt động của thông số kỹ thuật.