Thuộc tính hanging-punctuation trong CSS giúp các nhà thiết kế kiểm soát kiểu chữ trên trang web. Thuộc tính này chỉ định dấu chấm câu được đặt ngoài hộp dòng ở đầu hoặc cuối dòng văn bản.
Về cơ bản nó cho phép nhà thiết kế căn chỉnh bullets hoặc ký hiệu cụ thể sang trái hoặc phải. Điều này giúp chữ cái đầu tiên được căn chỉnh đúng với phần còn lại của tài liệu.
Chúng ta có thể sử dụng các từ khóa sau với thuộc tính hanging-punctuation và sử dụng chúng trong các chế độ khác nhau:
- Keyword values
- Two Keyword values
- Three Keyword values
- Global Keyword values
Syntax: For Keyword Values
ohanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last; hanging-punctuation: force-end; hanging-punctuation: allow-end;
Syntax: For Two Keyword Values
hanging-punctuation: first force-end; hanging-punctuation: first allow-end; hanging-punctuation: first last; hanging-punctuation: last force-end; hanging-punctuation: last allow-end;
Syntax: For Three Keyword Values
hanging-punctuation: first force-end last; hanging-punctuation: first allow-end last;
Syntax: For Global Values
hanging-punctuation: inherit; hanging-punctuation: initial; hanging-punctuation: unset;
Default Value:
- none
Property Values:
| Keyword | Functionality |
|---|---|
| none | Đây là giá trị mặc định cho thuộc tính này, không có ký tự nào được treo ra ngoài. |
| first | Sử dụng ký tự có sẵn ở đầu dòng đầu tiên của một phần tử để treo ra ngoài. |
| last | Sử dụng ký tự có sẵn ở cuối dòng cuối cùng của một phần tử để treo ra ngoài. |
| force-end | Sử dụng dấu chấm câu hoặc dấu phẩy ở cuối dòng để treo ra ngoài. |
| allow-end | Dấu chấm câu hoặc dấu phẩy ở cuối dòng treo ra ngoài nếu nó không vừa trước khi căn chỉnh. |
Example: Trong ví dụ này chúng ta đang sử dụng phương pháp đã giải thích ở trên.
html<!DOCTYPE HTML>
<html>
<head>
<title>
CSS Hanging Punctuation Property
</title>
<style>
p {
hanging-punctuation: first;
}
</style>
</head>
<body>
<p>“GeeksforGeeks: A computer science portal”</p>
</body>
</html>
Output:
Supported Browser: Các trình duyệt hỗ trợ hanging-punctuation Property được liệt kê dưới đây:
- Safari 10.0+