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ínhhyphens
đượ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 thehyphens
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ínhoverflow-wrap
được xác định trên cha mẹ ngay lập tức. the targeted element must inherit the value of theoverflow-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 =
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ự. 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.
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].overflow-wrap = normal | break-word | anywhere
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-wrap
4 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-wrap
4. overflow-wrap
4 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-wrap
4 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-wrap
4 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-wrap
4Indefiness, vì lý do di sản.
Cả overflow-wrap
và overflow-wrap
4 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
23 | 49 | 11 | 18 | 6.1 |
Di động / máy tính bảng
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]
5 so vớioverflow-wrap = normal | break-word | anywhere
overflow-wrap
[Overflow Stack]- Cách ngăn chặn việc phá vỡ dòng bằng CSS [DigitalOcean]
Làm cách nào để làm văn bản chuyển sang dòng tiếp theo?
Làm thế nào để bạn làm một dòng phá vỡ trong CSS?
Làm thế nào để bạn phá vỡ một văn bản dài trong CSS?
Làm cách nào để thực hiện văn bản chuyển sang dòng tiếp theo trong HTML?
element creates a line break. You can add it wherever you want text to end on the current line and resume on the next.