CSS - thuộc tính hyphenate-character: Chia từ với phong cách

Xin chào các nhà thuật toán CSS tương lai! Hôm nay, chúng ta sẽ cùng tìm hiểu một thuộc tính thú vị có thể làm cho văn bản của bạn trông chuyên nghiệp hơn: thuộc tính hyphenate-character. Hãy的准备 vì chúng ta sắp bắt đầu một hành trình qua thế giới của việc chia từ!

什么是 hyphenate-character 属性?

Trước khi chúng ta đi vào chi tiết, hãy hiểu thuộc tính này làm gì. Thuộc tính hyphenate-character cho phép bạn chỉ định ký tự (hoặc chuỗi ký tự) xuất hiện ở cuối dòng khi một từ bị断裂 qua hai dòng. Nó giống như việc cho văn bản của bạn mang một phụ kiện thời trang khi cần chia ra!

Các giá trị khả thi và cú pháp

Hãy cùng xem xét các giá trị khả thi và cú pháp cho thuộc tính này:

Giá trị	Mô tả
auto	Trình duyệt quyết định ký tự chia từ (thường là một gạch ngang đơn "-")
<chuỗi>	Bạn chỉ định ký tự hoặc chuỗi ký tự để sử dụng cho việc chia từ

Cú pháp rất đơn giản:

hyphenate-character: auto | <chuỗi>;

Bây giờ, hãy phân tích từng giá trị với một số ví dụ!

CSS hyphenate-character - giá trị auto

Khi bạn sử dụng giá trị auto, bạn đang thực sự nói với trình duyệt, "Hey, bạn là chuyên gia. Bạn chọn ký tự chia từ tốt nhất." Phần lớn thời gian, trình duyệt sẽ sử dụng một gạch ngang đơn ("-").

Dưới đây là một ví dụ:

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

Trong trường hợp này, nếu một từ cần bị断裂 qua hai dòng, nó có thể trông như thế này:

This is a very long word that needs to be hyphen-
ated across two lines.

Trình duyệt tự động chèn một gạch ngang ở nơi nó nghĩ là tốt nhất. Rất tuyệt, phải không?

CSS hyphenate-character - giá trị <chuỗi>

Bây giờ, hãy xem phần thú vị! Giá trị <chuỗi> cho phép bạn chỉ định chính xác ký tự hoặc chuỗi ký tự bạn muốn sử dụng cho việc chia từ. Muốn sử dụng một dấu gạch ngang? Hãy làm! Ba chấm? Tại sao không!

Hãy xem một số ví dụ:

p.fancy {
hyphens: auto;
hyphenate-character: "~";
}

p.dramatic {
hyphens: auto;
hyphenate-character: "...";
}

p.arrow {
hyphens: auto;
hyphenate-character: "→";
}

Với các phong cách này, văn bản của chúng ta có thể kết thúc như thế này:

This is a fancy word that needs to be hyphen~
ated across two lines.

This is a dramatic word that needs to be hyphen...
ated across two lines.

This is an arrow word that needs to be hyphen→
ated across two lines.

Đó có phải là tuyệt vời không? Bạn thực sự có thể sáng tạo với thuộc tính này!

Áp dụng cho

Bây giờ, bạn có thể tự hỏi, "Tôi có thể sử dụng thuộc tính tuyệt vời này ở mọi nơi không?" Thật ra, không phải vậy. Thuộc tính hyphenate-character áp dụng cho các hộp khối. Điều này bao gồm các phần tử như:

• <p> (đoạn văn)
• <div> (phân đoạn)
• <section>
• <article>

Cơ bản, bất kỳ phần tử nào có thể chứa một khối văn bản đều có thể sử dụng thuộc tính hyphenate-character.

Ví dụ thực tế

Hãy kết hợp tất cả những điều này trong một tình huống thực tế. Hãy tưởng tượng bạn đang thiết kế một trang web cho một nhà sách hiện đại và thời thượng. Bạn muốn văn bản trông bóng bẩy và độc đáo. Dưới đây là cách bạn có thể sử dụng thuộc tính hyphenate-character:

<style>
.book-description {
hyphens: auto;
hyphenate-character: "✒️";
text-align: justify;
max-width: 300px;
}
</style>

<p class="book-description">
Trong cuốn tiểu thuyết đầy kịch tính này, nhân vật chính bắt đầu một hành trình phi thường qua thời gian và không gian, gặp gỡ những sinh vật kỳ lạ và giải quyết những câu đố khó khăn dọc đường.
</p>

Trong ví dụ này, chúng ta sử dụng biểu tượng bút (✒️) làm ký tự chia từ. Nó vui nhộn, nó thú vị và nó phù hợp hoàn hảo với chủ đề nhà sách!

Hỗ trợ trình duyệt và các giải pháp dự phòng

Bây giờ, tôi không muốn là người mang tin xấu, nhưng không phải tất cả các trình duyệt đều hỗ trợ thuộc tính hyphenate-character chưa. Tính đến lần cập nhật cuối cùng của tôi, nó chủ yếu được hỗ trợ trong Firefox. Nhưng đừng lo lắng! Chúng ta có thể sử dụng một số giải pháp dự phòng để đảm bảo văn bản của chúng ta vẫn trông tuyệt vời ở mọi nơi:

p {
/* Thuộc tính tiêu chuẩn */
hyphenate-character: "~";

/* Trình duyệt Webkit */
-webkit-hyphenate-character: "~";

/* Trình duyệt Microsoft */
-ms-hyphenate-character: "~";
}

Bằng cách bao gồm các tiền tố nhà cung cấp này, chúng ta đang che phủ cơ sở cho các trình duyệt khác nhau.

Kết luận

Và thế là bạn đã có, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của thuộc tính hyphenate-character, từ cú pháp cơ bản đến các ứng dụng sáng tạo. Nhớ rằng, trong khi thuộc tính này rất vui để chơi, hãy luôn ưu tiên khả năng đọc. Ký tự chia từ thông minh của bạn không nên làm rối loạn nội dung.

Khi bạn tiếp tục hành trình CSS của mình, hãy tiếp tục thử nghiệm với các thuộc tính như này. Ai biết được? Bạn có thể tình cờ tìm thấy một sự kết hợp độc đáo làm cho thiết kế của bạn khác biệt với phần còn lại. Chúc các bạn may mắn và những đường断裂 luôn thời trang!

Credits: Image by storyset