WEB CƠ BẢN

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