CSS hyphens property là gì ? Cách sử dụng như thế nào ?

CSS Hyphens Property là thuộc tính được sử dụng để điều khiển việc cắt từ trong các phần tử mức khối. Nó xác định cách cắt từ nếu từ quá dài hoặc khi văn bản trải dài qua nhiều dòng. Thuộc tính này cho phép chúng ta chia từ thành hai dòng để cải thiện bố cục văn bản.

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 Hyphens Property là gì ?

Thuộc tính CSS Hyphens thường được sử dụng để điều chỉnh cách hiển thị văn bản của bạn. Với CSS Hyphens Property, bạn có thể kiểm soát cách từ được cắt trong văn bản của mình.

Thuộc tính này được sử dụng để kiểm soát các điểm cắt từ và lựa chọn cách cắt từ tốt nhất để tạo ra bố cục văn bản tốt hơn. Nó giúp tránh tình trạng các từ bị cắt bị đứt và không bị cắt quá ngắn trong văn bản.

Ai Sẽ Dùng CSS Hyphens Property?

Nếu bạn là một nhà thiết kế web hoặc nhà phát triển, CSS Hyphens Property sẽ hữu ích cho bạn khi bạn muốn kiểm soát cách từ được cắt trong văn bản của mình. Bạn có thể sử dụng nó để tạo ra các trang web chuyên nghiệp và đẹp mắt hơn cho khách hàng của mình.

Hướng Dẫn CSS Hyphens Property

Cấu trúc của thuộc tính CSS Hyphens Property được định nghĩa như sau:

hyphens: none | manual | auto | initial | inherit;

• none: Giá trị này không cắt từ. Nó không bao giờ cắt từ ở các điểm ngắt dòng hoặc ngay cả khi từ quá dài.
• manual: Đây là giá trị mặc định, chỉ cắt từ khi các ký tự trong từ cho thấy cơ hội cắt từ. Hai ký tự Unicode được định nghĩa dưới đây có thể được sử dụng để xác định các điểm ngắt dòng có thể trong văn bản.
  • U+2010 (HYPHEN) – Đây là ký tự gạch ngang “cứng” xác định điểm ngắt dòng hiển thị. Gạch ngang sẽ được hiển thị ngay cả khi dòng không bị ngắt tại điểm đó.
  • U+00AD (SHY) – Đây là ký tự gạch ngang “mềm” không hiển thị. Thay vào đó, nó chỉ định vị trí mà từ phải bị cắt. Trong html, chúng ta có thể sử dụng ­ để tạo ra ký tự gạch ngang “mềm”.
• auto: Với giá trị này, thuật toán quyết định nơi các từ được cắt.
• initial: Nó thiết lập thuộc tính về giá trị mặc định của nó.
• inherit: Nó kế thừa giá trị từ phần tử cha của nó.

Ví dụ CSS hyphens property:

• Để ngăn không cho hyphenation xảy ra:

p {
  hyphens: none;
}

Ví dụ này sẽ ngăn không cho hyphenation xảy ra trong các đoạn văn bản.

• Để cho phép hyphenation xảy ra ở các vị trí tự nhiên:

p {
  hyphens: manual;
}

Ví dụ này sẽ cho phép hyphenation xảy ra ở các vị trí tự nhiên trong các đoạn văn bản.

• Để cho phép hyphenation xảy ra ở tất cả các vị trí:

p {
  hyphens: auto;
}

Ví dụ này sẽ cho phép hyphenation xảy ra ở tất cả các vị trí trong các đoạn văn bản.

• Để đặt ký tự hyphenation:

p {
  hyphens: auto;
  hyphens-character: "-";
}

Ví dụ này sẽ cho phép hyphenation xảy ra ở tất cả các vị trí trong các đoạn văn bản, và sử dụng ký tự “-” làm ký tự hyphenation.

Tùy thuộc vào nhu cầu của bạn, bạn có thể sử dụng thuộc tính CSS hyphens property để kiểm soát cách thức hyphenation được thực hiện trong văn bản.

Dưới đây là một số ví dụ cụ thể hơn về cách sử dụng hyphens:

• Để ngăn không cho hyphenation xảy ra trong một đoạn văn bản:

<p style="hyphens: none;">Đây là một đoạn văn bản không bị hyphenate.</p>

Ví dụ này sẽ ngăn không cho hyphenation xảy ra trong đoạn văn bản.

• Để cho phép hyphenation xảy ra ở các vị trí tự nhiên trong một đoạn văn bản:

<p style="hyphens: manual;">Đây là một đoạn văn bản có hyphenation xảy ra ở các vị trí tự nhiên.</p>

Ví dụ này sẽ cho phép hyphenation xảy ra ở các vị trí tự nhiên trong đoạn văn bản.

• Để cho phép hyphenation xảy ra ở tất cả các vị trí trong một đoạn văn bản:

<p style="hyphens: auto;">Đây là một đoạn văn bản có hyphenation xảy ra ở tất cả các vị trí.</p>

Ví dụ này sẽ cho phép hyphenation xảy ra ở tất cả các vị trí trong đoạn văn bản.

• Để đặt ký tự hyphenation trong một đoạn văn bản:

<p style="hyphens: auto; hyphens-character: \"-\">Đây là một đoạn văn bản có hyphenation xảy ra ở tất cả các vị trí, sử dụng ký tự \"-\" làm ký tự hyphenation.</p>

Ví dụ này sẽ cho phép hyphenation xảy ra ở tất cả các vị trí trong đoạn văn bản, và sử dụng ký tự “-” làm ký tự hyphenation.

Tất nhiên, bạn có thể kết hợp các giá trị và ký tự đặc biệt khác nhau để tạo ra các hiệu ứng hyphens tùy chỉnh của riêng mình.

Ưu và Nhược Điểm CSS Hyphens Property

Ưu Điểm

• Giúp tạo bố cục văn bản chuyên nghiệp hơn khi các từ được cắt đúng cách, tránh tình trạng các từ bị cắt đứt hoặc quá ngắn.
• Cải thiện trải nghiệm đọc của người dùng bằng cách tạo ra các đoạn văn bản có độ dài và bố cục đồng nhất.

Nhược Điểm

• Các từ được cắt quá nhiều có thể làm cho văn bản trông không tự nhiên hoặc khó đọc.
• Không phù hợp để sử dụng cho một số loại trang web như các trang web trực tuyến về văn hóa, giáo dục vì nó có thể gây ra các lỗi ngữ pháp hoặc sửa chữa tìm kiếm.

Lời Khuyên CSS Hyphens Property

Khi sử dụng thuộc tính CSS Hyphens, bạn nên xác định cẩn thận các điểm cần cắt từ, đảm bảo rằng văn bản của bạn vẫn có thể đọc được. Bạn cũng nên sử dụng giá trị “manual” để xác định các điểm cắt từ, vì điều này sẽ giúp cải thiện tính đồng nhất trong bố cục của văn bản.

Ngoài ra, bạn cũng nên kiểm tra với các trình duyệt khác nhau để đảm bảo rằng việc cắt từ không ảnh hưởng đến tính thẩm mỹ của văn bản.