Một địa chỉ thường là [e. g. n tiêu đề thư] được in trên một dòng;
- địa chỉ đường phố, thị trấn hoặc thành phố, vùng, quốc gia, tỉnh hoặc tiểu bang, v.v. - và hoàn toàn không có ý nghĩa gì về phần tử br ở đó, đó chỉ là một cách định dạng. Sử dụng phần tử “dòng” hoặc các phần tử được đặt tên thích hợp nếu bạn muốn tạo điều kiện thuận lợi cho quá trình xử lý tiếp theo, nếu bạn muốn nắm bắt ý nghĩa, ngữ nghĩa
Trong tiêu đề, bạn có thể muốn ngắt dòng đáp ứng, vì vậy bạn muốn chỉ ra các điểm ngắt có điều kiện chính và phụ tùy thuộc vào không gian có sẵn. Thật không may, HTML và CSS ngày nay không tốt lắm, nhưng bạn có thể sử dụng các phần tử br với các thuộc tính lớp biểu thị chính hoặc phụ và sử dụng các truy vấn phương tiện để tạo điều kiện cho các khoảng trống có sẵn
Nếu bạn muốn ngắt cụm từ và không có lo ngại về ngắt thứ cấp, bạn có thể sử dụng span class=“cụm từ” và ngắt dòng điều khiển theo cách đó. Bạn cũng có thể sử dụng một trong các biến thể “trước”, e. g. gói trước và có một dòng mới nơi bạn muốn nghỉ ngơi
Thuộc tính overflow-wrap
trong CSS cho phép bạn chỉ định rằng trình duyệt có thể ngắt một dòng văn bản bên trong phần tử được nhắm mục tiêu thành nhiều dòng ở một vị trí không thể ngắt được. Đ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;
}
cú pháp
overflow-wrap =
normal |
break-word |
anywhere
- Giá trị ban đầu.
normal
- Áp dụng cho. các phần tử nội tuyến không được thay thế
- Thừa hưởng. Vâng
- Giá trị tính toán. theo quy định
- loại hoạt hình. rời rạc
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ị ngắt sẽ không bị ngắt, ngay cả khi chúng tràn vào vùng chứa
1. 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ị ngắt ở một vị trí tùy ý để buộc ngắt dòng. Ký tự gạch nối sẽ không được chèn, ngay cả khi thuộc tínhoverflow-wrap = normal | break-word | anywhere
2 được sử dụngoverflow-wrap = normal | break-word | anywhere
3. phần tử được nhắm mục tiêu phải kế thừa giá trị của thuộc tínhoverflow-wrap = normal | break-word | anywhere
overflow-wrap
được xác định trên cha mẹ trực tiếp của nó
Bản trình diễn bên dưới có một nút chuyển đổi cho phép bạn chuyển đổi giữa normal
và
overflow-wrap =
normal |
break-word |
anywhere
1Dự phòng nhúng CodePen
Để chứng minh vấn đề mà overflow-wrap
cố gắng giải quyết, bản demo sử dụng một từ dài bất thường bên trong một hộp chứa tương đối nhỏ. Khi bạn bật
overflow-wrap =
normal |
break-word |
anywhere
1, từ được chia nhỏ để phù hợp với lượng không gian 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 [
overflow-wrap =
normal |
break-word |
anywhere
3] sẽ được xử lý theo cách tương tự và cũng sẽ ngắt tại một vị trí thích hợpoverflow-wrap
hữu ích khi được á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ị gián đoạn khác [e. g. phá hoại] khỏi việc phá vỡ bố cục của trang web
Điểm tương đồng với tài sản overflow-wrap =
normal |
break-word |
anywhere
5
overflow-wrap =
normal |
break-word |
anywhere
overflow-wrap
và
overflow-wrap =
normal |
break-word |
anywhere
5 hoạt động 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-wrap
thường được sử dụng để tránh các sự cố với 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
5 chỉ định cơ hội bọc mềm giữa các chữ cái thường được liên kết với các ngôn ngữ như tiếng Trung, tiếng Nhật và tiếng Hàn [CJK]overflow-wrap = normal | break-word | anywhere
Sau khi mô tả các ví dụ về cách sử dụng
overflow-wrap =
normal |
break-word |
anywhere
5 trong nội dung CJK, thông số kỹ thuật cho biết. “Để kích hoạt các cơ hội ngắt bổ sung chỉ trong trường hợp quá tải, hãy xem overflow-wrap
“Từ điều này, chúng tôi có thể phỏng đoán rằng
overflow-wrap =
normal |
break-word |
anywhere
5 đượ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, trong khi đó nên sử dụng overflow-wrap
để tránh bố cục bị hỏng do chuỗi dài, bất kể Tài sản lịch sử overflow-wrap
4
overflow-wrap
là tên tiêu chuẩn cho tiền thân của nó, thuộc tính overflow-wrap
4. overflow-wrap
4 ban đầ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
overflow-wrap
4 chấp nhận các giá trị giống như overflow-wrap
và hoạt động theo cùng một cách. Theo thông số kỹ thuật, trình duyệt “phải coi overflow-wrap
4 là tên thay thế cho thuộc tính overflow-wrap
, như thể đó 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ợ overflow-wrap
4 vô thời hạn, vì các lý do cũ
Cả overflow-wrap
và overflow-wrap
4 sẽ vượt qua xác thực CSS miễn là trình xác thực được đặt để kiểm tra theo CSS3 trở lên [hiện tại là mặc định]
hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên