Làm cách nào để tạo ngắt dòng tự động trong html?

Bạn có thể sử dụng các tùy chọn hộp văn bản để bọc văn bản bao quanh hộp văn bản chặt chẽ hơn. Để sử dụng các tùy chọn này, đường viền hộp văn bản phải trong suốt (không có dòng và không tô) và Văn bản ngắt dòng phải được đặt ở Chặt hoặc Thông qua

Thuộc tính CSS

line-break: auto | loose | normal | strict | anywhere;

3 xác định mức độ nghiêm ngặt để thực thi các quy tắc ngắt dòng văn bản trên các dòng mới, đặc biệt khi làm việc với các ký hiệu và dấu chấm câu trong hệ thống chữ viết tiếng Trung, tiếng Nhật hoặc tiếng Hàn (CJK). Nó được bao gồm trong đặc tả Cấp 3 của Mô-đun Văn bản CSS, hiện có trong Bản nháp của Biên tập viên

.element {
  line-break: strict;
}

Thử nghiệm

Dự phòng nhúng CodePen

cú pháp

line-break: auto | loose | normal | strict | anywhere;

• Ban đầu.

  line-break: auto | loose | normal | strict | anywhere;

  4
• Áp dụng đối với. tất cả các yếu tố
• 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ị

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

• line-break: auto | loose | normal | strict | anywhere;

  4. Điều này cho phép trình duyệt quyết định cách nó thực hiện ngắt dòng. Mỗi trình duyệt có thể khác nhau về tiêu chí của nó dựa trên các yếu tố, bao gồm độ dài dòng

• line-break: auto | loose | normal | strict | anywhere;

  6. Đây là cách thực thi nhẹ nhất các quy tắc ngắt dòng. Thông số trích dẫn các dòng văn bản ngắn, giống như những dòng chúng ta có thể thấy trên báo, làm ví dụ về giá trị này có thể được sử dụng

• line-break: auto | loose | normal | strict | anywhere;

  7. Thao tác này ngắt các dòng văn bản dựa trên bộ quy tắc “phổ biến nhất”. (Lưu ý rằng không có định nghĩa nào được cung cấp về bộ quy tắc phổ biến nhất là gì hoặc bộ quy tắc đó có thể chứa những gì. )

• line-break: auto | loose | normal | strict | anywhere;

  8. Điều này thực thi bộ quy tắc nghiêm ngặt nhất để ngắt dòng

• line-break: auto | loose | normal | strict | anywhere;

  9. Giá trị này cho phép cơ hội ngắt dòng mềm, cho phép ngắt văn bản ở khoảng trắng hoặc dấu chấm câu thay vì chỉ ngắt dòng từ. Đó là lý tưởng cho các ngôn ngữ có thể không sử dụng dấu cách hoặc dấu chấm câu để phân tách các từ. Thông số kỹ thuật nói rằng CSS không xác định cơ hội bọc mềm và giá trị này nhận ra và tận dụng chúng để áp dụng quy tắc ngắt dòng. Thông số kỹ thuật mô tả hành vi gói văn bản giống như những gì chúng ta thường thấy trong thiết bị đầu cuối

Thông số kỹ thuật cũng lưu ý rằng giá trị

line-break: auto | loose | normal | strict | anywhere;

9 cho phép các khoảng trắng được bảo toàn ở cuối dòng được ngắt dòng sang dòng tiếp theo khi được sử dụng với thuộc tính

line-break: auto | loose | normal | strict | anywhere;

1 được đặt thành

line-break: auto | loose | normal | strict | anywhere;

2

Giá trị hành vi trên các ngôn ngữ khác nhau

Như bạn có thể tưởng tượng, các ngôn ngữ khác nhau có các tùy chọn khác nhau khi nói đến cách văn bản được chia thành các dòng mới. Không có quy ước tiêu chuẩn được sử dụng bởi tất cả các ngôn ngữ. Điều đó khiến các trình duyệt phải tìm ra và tuân theo các quy tắc “đúng” cho một ngôn ngữ cụ thể. Nhưng thông số kỹ thuật có phác thảo một số yêu cầu để xác định xem có cho phép ngắt dòng ở các mức độ nghiêm ngặt khác nhau của

line-break: auto | loose | normal | strict | anywhere;

3 trong một số tình huống nhất định hay không. Chúng tôi sẽ trình bày chúng ở đây

Thuộc tính

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2 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.

  line-break: auto | loose | normal | strict | anywhere;

  7
• Áp dụng đối với. 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ị

• line-break: auto | loose | normal | strict | anywhere;

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

• /* Keyword values */
  line-break: auto;
  line-break: loose;
  line-break: normal;
  line-break: strict;
  line-break: anywhere;
  
  /* Global values */
  line-break: inherit;
  line-break: initial;
  line-break: unset;

  5. 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

  /* Keyword values */
  line-break: auto;
  line-break: loose;
  line-break: normal;
  line-break: strict;
  line-break: anywhere;
  
  /* Global values */
  line-break: inherit;
  line-break: initial;
  line-break: unset;

  6 được sử dụng

• /* Keyword values */
  line-break: auto;
  line-break: loose;
  line-break: normal;
  line-break: strict;
  line-break: anywhere;
  
  /* Global values */
  line-break: inherit;
  line-break: initial;
  line-break: unset;

  7. phần tử được nhắm mục tiêu phải kế thừa giá trị của thuộc tính

  /* Keyword values */
  line-break: auto;
  line-break: loose;
  line-break: normal;
  line-break: strict;
  line-break: anywhere;
  
  /* Global values */
  line-break: inherit;
  line-break: initial;
  line-break: unset;

  2 đượ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

line-break: auto | loose | normal | strict | anywhere;

7 và

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

5

Dự phòng nhúng CodePen

Để chứng minh vấn đề mà

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2 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

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

5, 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 các ký tự khoảng cách 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

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2 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

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2 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à

• /* Keyword values */
  line-break: auto;
  line-break: loose;
  line-break: normal;
  line-break: strict;
  line-break: anywhere;
  
  /* Global values */
  line-break: inherit;
  line-break: initial;
  line-break: unset;

  2 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ác 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

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2“

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

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2 để tránh bố cục bị hỏng do chuỗi dài, bất kể

Tài sản lịch sử /* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: unset;24

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2 là tên tiêu chuẩn cho tiền thân của nó, thuộc tính

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

24.

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

24 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

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

24 chấp nhận các giá trị giống như

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2 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

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

24 là tên thay thế cho thuộc tính

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2, như thể đó là cách viết tắt của

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2“. Ngoài ra, tất cả các tác nhân người dùng được yêu cầu hỗ trợ

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

24 vô thời hạn, vì các lý do cũ

Cả

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

2 và

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;

24 đều sẽ vượt qua quy trình xác thực CSS miễn là trình xác thực được đặt để kiểm tra theo CSS3 trở lên (mặc định hiện tại)

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 số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên