Hướng dẫn break-word css - ngắt từ 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

• break-word
• - 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ì phần ký tự tràn ra ngoài sẽ được ngắt xuống dòng.
• break-all
• CSS3
• - Một từ sẽ bắt đầu tiếp tục trên hàng hiện tại nếu hàng đó còn dư khoảng trống mặc cho có đủ để chứa hết từ đó hay không.

initial

- Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính word-break có giá trị là normal)

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

inherit

Ví dụ

HTML viết:

HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN

CSS viết:

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

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

HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN

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

p {
    border: 1px solid #cc0000;
    width: 150px;
    word-wrap: break-word;
}

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

HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN

Xem ví dụ

break-word 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.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ử.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.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ử.

2) Cách sử dụng thuộc tính word-break trong CSSword-break, ta dùng cú pháp như sau:

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

- Để sử dụng thuộc tính word-break, ta dùng cú pháp như sau:word-break có thể được xác định bởi một trong năm loại: