Css word-wrap vs word-break

Ghi chú. Ngược lại với word-break, overflow-wrap sẽ chỉ tạo ra một dấu ngắt nếu toàn bộ một từ không thể được đặt trên dòng của chính nó mà không bị tràn

Thuộc tính ban đầu là một tiện ích mở rộng không chuẩn và không có tiền tố của Microsoft có tên là word-wrap và được triển khai bởi hầu hết các trình duyệt có cùng tên. Kể từ đó, nó đã được đổi tên thành overflow-wrap, với word-wrap là bí danh

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;

Thuộc tính overflow-wrap được chỉ định là một từ khóa duy nhất được chọn từ danh sách các giá trị bên dưới

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

Các dòng chỉ có thể ngắt tại các điểm ngắt từ thông thường (chẳng hạn như khoảng cách giữa hai từ)

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

Để tránh bị tràn, một chuỗi ký tự không thể ngắt khác — như một từ dài hoặc URL — có thể bị ngắt tại bất kỳ điểm nào nếu không có điểm ngắt nào được chấp nhận trong dòng. Không có ký tự gạch nối nào được chèn vào điểm ngắt. Các cơ hội bọc mềm được giới thiệu bởi ngắt từ được xem xét khi tính kích thước nội tại nội dung tối thiểu

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

Giống như giá trị

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

Giá trị ban đầu_______1_______1Áp dụng cho các phần tử nội tuyến không được thay thếKế thừacác giá trị được tính toán như đã chỉ địnhLoại hoạt ảnhrời rạc

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

Ví dụ này so sánh kết quả của overflow-wrap, word-break và

overflow-wrap = 
  normal      |
  break-word  |
  anywhere