Cách tách dòng trong CSS

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

• overflow-wrap = 
    normal      |
    break-word  |
    anywhere    

  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ính

  overflow-wrap = 
    normal      |
    break-word  |
    anywhere    

  2 được sử dụng

• overflow-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ính 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    

1

Dự 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ợp

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

• overflow-wrap = 
    normal      |
    break-word  |
    anywhere    

  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)

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

overflow-wrap là tên tiêu chuẩn cho tiền thân của nó, thuộc tính overflow-wrap4. overflow-wrap4 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-wrap4 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-wrap4 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-wrap4 vô thời hạn, vì các lý do cũ

Cả overflow-wrap và overflow-wrap4 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

Làm cách nào để tách dòng HTML?

Làm cách nào để tách văn bản trong CSS?