Hướng dẫn word-break trong css

• Trang chủ
• Tham khảo
• CSS
• CSS3
• Thuộc tính word-break

Định nghĩa và sử dụng

Thuộc tính word-break sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống hàng bất cứ vị trí nào trong từ.

Cấu trúc

tag {
    word-break: giá trị;
}

word-break có các giá trị như sau:

HTML viết:

Học web chuẩn sẽ giúp bạn định hình lại những gì đã học.

CSS viết:

p {
    border: 1px solid #cc0000;
    width: 100px;
}

Hiển thị trình duyệt khi chưa có word-break:

Học web chuẩn sẽ giúp bạn định hình lại những gì đã học.

Thêm thuộc tính word-break vào CSS:

p {
    border: 1px solid #cc0000;
    width: 100px;
    word-break: break-all;
}

Hiển thị trình duyệt khi có word-break:

Học web chuẩn sẽ giúp bạn định hình lại những gì đã học

1) Thuộc tính word-break trong CSS

- Thuộc tính word-break xác định cách thức phá vỡ một từ.

(hay nói cách khác là cách thức ngắt ký tự của một từ xuống dòng)

- Mặc định, nếu phần còn lại của hàng hiện tại không đủ chỗ để chứa hết từ thì từ đó sẽ được bắt đầu trên một hàng mới & nếu một từ quá dài vượt quá chiều rộng phần nội dung của phần tử thì từ đó sẽ bị tràn ra ngoài:

Loạt tài liệu hướng dẫn học lập trình web của chúng tôi bao gồm HTMLCSSJavaScriptMySQLPHPjQuery được biên soạn kỹ lưỡng theo mức độ từ cơ bản đến nâng cao.

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

Loạt tài liệu hướng dẫn học lập trình web của chúng tôi bao gồm HTMLCSSJavaScriptMySQLPHPjQuery được biên soạn kỹ lưỡng theo mức độ từ cơ bản đến nâng cao.

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

- Để sử dụng thuộc tính word-break, ta dùng cú pháp như sau:

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

- Trong đó, ta thấy giá trị của thuộc tính word-break có thể được xác định bởi một trong năm loại:

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: