Hướng dẫn css wrap text to next line - css bọc văn bản sang dòng tiếp theo

Thuộc tính overflow-wrap trong CSS cho phép bạn chỉ đị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ử được nhắm mục tiêu trên nhiều dòng ở một vị trí không thể phá vỡ khá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 normal
• Áp dụng cho: các yếu tố nội tuyến không được sao chép non-replaced inline elements
• Kế thừa: Có yes
• Giá trị tính toán: Theo chỉ định as specified
• Loại hoạt hình: rời rạc discrete

Giá trị

• normal: Mặc định. Trình duyệt sẽ phá vỡ các dòng theo các quy tắc phá vỡ dòng thông thường. Từ hoặc chuỗi không bị phá vỡ sẽ không bị vỡ, ngay cả khi chúng tràn vào container. the default. The browser will break lines according to normal line breaking rules. Words or unbroken strings will not break, even if they overflow the container.
• break-word: Các từ hoặc chuỗi các ký tự quá lớn để phù hợp với bên trong container của chúng sẽ bị vỡ ở một nơi tùy ý để buộc phá vỡ dòng. Một ký tự dấu gạch nối sẽ không được chèn vào, ngay cả khi thuộc tính hyphens được sử dụng. words or strings of characters that are too large to fit inside their container will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the hyphens property is used.
• inherit: 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ẹ ngay lập tức. the targeted element must inherit the value of the overflow-wrap property defined on its immediate parent.

Bản demo bên dưới có nút chuyển đổi cho phép bạn chuyển đổi giữa normal và break-word.

Để 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 thùng chứa tương đối nhỏ. Khi bạn bật break-word, từ bị hỏng để chứa lượng nhỏ không gian có sẵn, như thể từ này là nhiều từ.

Một chuỗi các ký tự không gian không phá vỡ (

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

3) sẽ được đối xử theo cùng một cách và cũng sẽ bị phá vỡ tại một điểm thích hợp.

overflow-wrap rất hữu ích khi được áp dụng cho các yếu tố chứa nội dung do người dùng tạo ra (như phần bình luận). Đ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 (ví dụ: phá hoại) phá vỡ bố cục trang web.

Sự tương đồng với thuộc tính 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ự. Một bản 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 vấn đề 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 một container.

• 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

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

5 có thể được sử dụng trong nội dung CJK, thông số kỹ thuật nói: Để chỉ cho phép các cơ hội phá vỡ bổ sung trong trường hợp tràn, xem overflow-wrap.

Từ đó, chúng ta 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 đòi hỏi ngôn ngữ được sử dụng.

Tài sản overflow-wrap4 lịch sử

overflow-wrap là tên tiêu chuẩn cho người tiền nhiệm của nó, thuộc tính overflow-wrap4. overflow-wrap4 ban đầu là một tính năng chỉ dành cho Internet Explorer độc quyền mà 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à hành xử theo cùng một cách. Theo thông số kỹ thuật, các trình duyệt, phải coi overflow-wrap4 như một tên thay thế cho thuộc tính overflow-wrap, như thể nó là một tốc ký của overflow-wrap. Ngoài ra, tất cả các đại lý người dùng được yêu cầu hỗ trợ overflow-wrap4Indefiness, vì lý do di sản.

Cả overflow-wrap và overflow-wrap4 sẽ vượt qua xác thực CSS miễn là trình xác nhận được đặt để kiểm tra chống lại CSS3 trở lên (hiện là mặc định).

Hỗ trợ trình duyệt

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Bờ rìa	Cuộc đi săn
23	49	11	18	6.1

Di động / máy tính bảng

Android chrome	Android Firefox	Android	iOS safari
106	105	4.4	7.0-7.1

Thêm thông tin

• Đặc điểm kỹ thuật mô -đun văn bản CSS Cấp 3 (W3C)
• Xử lý các từ và URL dài (CSS-Tricks)
• Viết từ: Một thuộc tính CSS3 hoạt động trong mọi trình duyệt (Louis Lazaris)

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

  5 so với overflow-wrap (Overflow Stack)
• Cách ngăn chặn việc phá vỡ dòng bằng CSS (DigitalOcean)

Làm thế nào để bạn phá vỡ một văn bản dài trong CSS?

Làm thế nào để bạn phá vỡ các từ trong CSS?

Làm thế nào để bạn phá vỡ văn bản nhịp?

Làm cách nào để bọc văn bản mà không có khoảng trống trong CSS?