Cách sử dụng thuộc tính word-break trong CSS

Như chúng ta đã biết, một từ sẽ được bắt đầu trên một hàng mới (nếu phần trống còn lại của hàng hiện tại không đủ để chứa nó)

Ví dụ:

Học lập trình webbbbbbbbbbbbbb từ cơ bản đến nâng cao

Tuy nhiên, ta có thể sử dụng thuộc tính bword-break để thiết lập việc một từ sẽ được tiếp tục bắt đầu ở phần còn lại trên dòng hiện tại và nó sẽ tự động ngắt các ký tự còn lại xuống dòng nếu hàng hiện tại không chứa hết nó.

Ví dụ:

Học lập trình webbbbbbbbbbbbbb từ cơ bản đến nâng cao

Cách sử dụng thuộc tính word-break

Cú pháp:

word-break: normal | break-all | keep-all | initial | inherit;

Giải thích ý nghĩa các giá trị của thuộc tính word-break:

Giá trị	Mô tả	Xem ví dụ
normal	Đây là giá trị mặc định (một từ sẽ được bắt đầu trên hàng mới, nếu hàng hiện tại không đủ khoảng trống)	Xem ví dụ
break-all	Một từ sẽ được tiếp tục bắt đầu ở phần còn lại trên dòng hiện tại và nó sẽ tự động ngắt các ký tự còn lại xuống dòng nếu hàng hiện tại không chứa hết nó.	Xem ví dụ
initial	Sử dụng giá trị mặc định của nó
inherit	Kế thừa giá trị thuộc tính word-break từ phần tử cha của nó