CSS word-break property là gì và sử dụng như thế nào ?

Trong thiết kế web, việc sử dụng thuộc tính CSS word-break giúp xác định cách thức tách từ khi hiển thị nội dung trên website. Thuộc tính này được sử dụng để xác định các quy tắc ngắt dòng. Với thuộc tính này, những dòng nào không vừa với hộp nội dung sẽ bị tách ở một điểm cụ thể.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS word-break property là gì?

Thuộc tính CSS word-break quy định cách thức tách từ trong các văn bản hiển thị trên trang web. Mặc định, nó có giá trị là normal, tức là sẽ tự động sử dụng khi không chỉ định bất kỳ giá trị nào. Nó có các giá trị khác nhau như keep-all, break-all, initial và inherit.

Giá trị Keep-all

Khi giá trị này được áp dụng, từ sẽ không bị tách ra và được xem như một khối duy nhất. Giá trị này không nên được sử dụng cho tiếng Nhật / Trung Quốc / Hàn Quốc (CJK) vì nó sẽ không phân biệt các từ riêng lẻ và gây khó khăn cho người đọc.

Giá trị Break-all

Khi giá trị này được áp dụng, các từ sẽ được tách ra thành các ký tự để ngăn chặn việc tràn từ. Khi giá trị này được áp dụng, trình duyệt sẽ tách dòng ở bất kỳ điểm nào. Nó cũng có thể tách từ giữa nếu từ quá dài và không vừa vào cuối dòng. Tuy nhiên, nó không áp dụng các dấu gạch nối.

Giá trị Initial

Giá trị này đặt thuộc tính word-break về giá trị mặc định của nó.

Giá trị Inherit

Giá trị này kế thừa thuộc tính word-break từ phần tử cha.

Hướng dẫn CSS word-break property

Để sử dụng thuộc tính word-break trong CSS, ta chỉ cần gán thuộc tính này cho một phần tử HTML bằng cú pháp sau:

.element{
    word-break: value;
}

Trong đó:

• .element: Là tên của phần tử HTML muốn áp dụng thuộc tính này.
• value: Là giá trị của thuộc tính word-break muốn áp dụng.

Ví dụ CSS word-break property

CSS word-break property cho phép bạn chỉ định cách các từ được chia khi chúng vượt ra ngoài phần tử chứa chúng. Giá trị mặc định của thuộc tính này là normal, có nghĩa là các từ sẽ chỉ được chia khi chúng không thể được hiển thị trong phần tử chứa chúng mà không bị cắt ngắn.

Có ba giá trị chính của thuộc tính word-break:

• normal: Các từ sẽ chỉ được chia khi chúng không thể được hiển thị trong phần tử chứa chúng mà không bị cắt ngắn.
• break-all: Các từ sẽ được chia ở bất kỳ đâu trong dòng, ngay cả khi chúng không bị cắt ngắn.
• keep-all: Các từ sẽ không được chia, ngay cả khi chúng không thể được hiển thị trong phần tử chứa chúng mà không bị cắt ngắn.

Dưới đây là một số ví dụ về cách sử dụng CSS word-break property:

// Để cho phép các từ được chia khi chúng vượt ra ngoài phần tử chứa chúng, ngay cả khi chúng không bị cắt ngắn
div {
  word-break: break-all;
}

// Để ngăn các từ được chia, ngay cả khi chúng không thể được hiển thị trong phần tử chứa chúng mà không bị cắt ngắn
div {
  word-break: keep-all;
}

Dưới đây là một số ví dụ cụ thể về cách sử dụng CSS word-break property:

Để hiển thị một đoạn văn bản dài trong một phần tử nhỏ, bạn có thể sử dụng word-break: break-all để cho phép các từ được chia khi chúng vượt ra ngoài phần tử chứa chúng.

p {
  word-break: break-all;
}

Để ngăn các từ được chia trong một đoạn mã, bạn có thể sử dụng word-break: keep-all.

code {
  word-break: keep-all;
}

Để ngăn các từ được chia trong một URL, bạn có thể sử dụng word-break: keep-all.

a {
  word-break: keep-all;
}

Ưu và Nhược điểm CSS word-break property

Ưu điểm của CSS word-break property

• Giúp kiểm soát cách thức tách từ trong văn bản hiển thị trên website.
• Có thể áp dụng để ngăn chặn việc tràn từ và giúp nội dung trên website trở nên dễ đọc hơn.

Nhược điểm của CSS word-break property

• Việc sử dụng thuộc tính này có thể làm mất đi tính đồng nhất của giao diện website.
• Giá trị keep-all không nên được sử dụng cho tiếng Nhật / Trung Quốc / Hàn Quốc (CJK) vì nó sẽ không phân biệt các từ riêng lẻ và gây khó khăn cho người đọc.

Lời khuyên CSS word-break property

Khi sử dụng thuộc tính word-break trong CSS, bạn nên cân nhắc kỹ giá trị muốn áp dụng để đảm bảo nội dung hiển thị trên website đồng nhất và dễ đọc. Nếu website của bạn có nhiều văn bản tiếng Nhật / Trung Quốc / Hàn Quốc (CJK), bạn nên sử dụng giá trị break-all để tách từ sao cho đúng và dễ đọc.

Ngoài ra, bạn nên sử dụng thuộc tính này một cách hợp lý và không quá sử dụng, để tránh làm mất đi tính thống nhất và giao diện của website.

Kết luận

Trên đây là tổng quan về thuộc tính CSS word-break, giúp bạn hiểu rõ cách thức tách từ trong văn bản hiển thị trên website. Việc sử dụng thuộc tính này một cách hợp lý và không quá sử dụng sẽ giúp cho website của bạn trở nên thống nhất và dễ đọc hơn.