Chữ-trang-trí-bỏ-mực - Thủ thuật CSS

Anonim

text-decoration-skip-inklà thuộc tính kiểm soát hành vi của underlinevà overline(nhưng không line-through) khi dòng đi qua một phần của ký tự / glyph. Điều này cung cấp cho bạn khả năng kiểm soát tinh chỉnh đối với cách gạch dưới hoặc gạch dưới tương tác với các ký tự kéo dài phía trên đầu hoặc treo dưới cuối dòng.

Trước đây điều này được xử lý thông qua tổ hợp thuộc text-decoration-skip: ink;tính / giá trị, nhưng sau khi thảo luận về cách xử lý vấn đề kiểu xếp tầng vô tình ghi đè các kiểu có mức độ ưu tiên thấp hơn (do số lượng tùy chọn có sẵn text-decoration-skip), các thuộc tính riêng lẻ sẽ được chia thành các thuộc tính mới tương tự như text-decoration-skip-ink. Để biết thêm ngữ cảnh và ví dụ về lý do tại sao điều này được thay đổi, hãy xem cuộc thảo luận GitHub này và biên bản Nhóm làm việc CSS thảo luận về các thuộc tính.

Theo mặc định, các trình duyệt sẽ "bỏ qua" các khu vực mà "mực" của một ký tự vượt qua một gạch dưới, như sau:

Bạn có thể thay đổi hành vi này để buộc gạch dưới / gạch ngang đi qua ký tự bằng cách đặt text-decoration-skip-inkthành none.

.line-of-text-thats-already-underlined ( text-decoration-skip-ink: none; )

Điều này dẫn đến dòng cắt ngay qua các ký tự:

Cú pháp

text-decoration-skip-ink: auto | none;

Giá trị

text-decoration-skip-ink chấp nhận các giá trị sau:

  • auto là giá trị mặc định và sẽ "bỏ qua" gạch dưới / gạch dưới khi chuyển qua một ký tự.
  • none sẽ cắt gạch chân / gạch dưới đó qua ngay chữ y và chữ t cao của bạn.

Thí dụ

Xem ví dụ về Bút-trang trí-bỏ-mực
bằng CSS-Tricks (@ css-trick) trên CodePen.

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
91 87 Không 88 TP.

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

Có liên quan

  • text-decoration-skip
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Tài nguyên

  • Tài liệu MDN
  • Tạo kiểu gạch chân trên web
  • Người dùng khó đọc và gạch chân bỏ mực