Các hanging-punctuationmục tiêu bất động sản tại cho web thiết kế một mịn kiểm soát hạt trên typography trên web.
Ý tưởng đằng sau việc treo dấu câu là đặt một số ký tự dấu câu từ đầu (hoặc kéo dài ít hơn ở cuối) của các thành phần văn bản “bên ngoài” của hộp để duy trì luồng đọc.
Về cơ bản, nó sẽ di chuyển một chút trích dẫn, dấu đầu dòng hoặc bất cứ thứ gì sang trái (hoặc phải trong rtlchế độ) để chữ cái đầu tiên được căn chỉnh chính xác với phần còn lại của tài liệu.
Xin lưu ý rằng thuộc tính này là tùy chọn nên các nhà sản xuất trình duyệt có thể hỗ trợ hoặc không.
Cú pháp
hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )none
Không có ký tự nào bị treo. Đây là giá trị mặc định cho thuộc tính này.
first
Một ký tự có sẵn ở đầu dòng được định dạng đầu tiên của một phần tử sẽ bị treo.
last
Một ký tự có sẵn ở cuối dòng được định dạng cuối cùng của một phần tử sẽ bị treo.
force-end
Dấu dừng hoặc dấu phẩy ở cuối dòng bị treo.
Dấu câu buộc phải treo và không được xem xét khi đo dòng để biện minh.
allow-end
Dấu dừng hoặc dấu phẩy ở cuối dòng sẽ bị treo nếu nó không phù hợp trước khi biện minh.
Dấu chấm câu ở cuối dòng đầu tiên cho không bị treo vì nó vừa vặn mà không bị treo. Tuy nhiên, trên dòng thứ hai, không có đủ không gian nên nó bị treo.
Các ký tự có sẵn
| Mã | Tính cách | Tên |
|---|---|---|
U+002C | , | COMMA |
U+002E | . | DẤU CHẤM |
U+060C | ، | ARABIC COMMA |
U+06D4 | ۔ | DỪNG ĐẦY ĐỦ ARABIC |
U+3001 | 、 | IDEOGRAPHIC COMMA |
U+3002 | 。 | IDEOGRAPHIC FULL STOP |
U+FF0C | ， | FULLWIDTH COMMA |
U+FF0E | ． | FULLWIDTH FULL STOP |
U+FE50 | ﹐ | COMMA NHỎ |
U+FE51 | ﹑ | COMMA NHỎ IDEOGRAPHIC |
U+FE52 | ﹒ | DỪNG ĐẦY ĐỦ NHỎ |
U+FF61 | ｡ | HALFWIDTH IDEOGRAPHIC FULL STOP |
U+FF64 | ､ | HALFWIDTH IDEOGRAPHIC COMMA |
Lưu ý rằng tác nhân người dùng được phép thêm bất kỳ ký tự nào vào danh sách này. Trích dẫn thông số kỹ thuật:
UA có thể bao gồm các ký tự khác nếu thích hợp.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| Không | Không | Không | Không | 10 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Không | Không | Không | 10.0-10.2 |
Một dự phòng hợp lý cho trình duyệt không được hỗ trợ là sử dụng thụt lề văn bản phủ định như vậy:
blockquote p ( text-indent: -0.5em; /* Change according to your font */ )Đối với danh sách dấu đầu dòng, bạn có thể muốn đảm bảo vị trí của dấu đầu dòng được đặt thành outsidevà phần tràn của vùng chứa không được đặt thành hidden.