text-decoration-skip-ink
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
* Some parts of this feature may have varying levels of support.
Thuộc tính CSS text-decoration-skip-ink xác định cách vẽ các đường gạch trên và gạch chân khi chúng đi qua phần nhô lên và xuống của ký tự (ascender và descender).
Try it
text-decoration-skip-ink: auto;
text-decoration-skip-ink: none;
<section id="default-example">
<p>
<span class="transition-all" id="example-element">parapsychologists</span>
</p>
</section>
p {
font:
1.9em "Georgia",
serif;
text-decoration: underline;
}
text-decoration-skip-ink không phải là một phần của thuộc tính viết tắt text-decoration.
Cú pháp
/* Từ khóa đơn */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;
/* Từ khóa toàn cục */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;
Giá trị
none-
Các đường gạch chân và gạch trên được vẽ trên toàn bộ chiều dài của nội dung văn bản, kể cả các phần giao với phần nhô lên và xuống của ký tự.
auto-
Mặc định — trình duyệt có thể ngắt các đường gạch chân và gạch trên để chúng không chạm vào hay tiếp cận quá gần một ký tự. Tức là, chúng bị ngắt tại nơi chúng sẽ đi qua một ký tự.
all-
Trình duyệt phải ngắt các đường gạch chân và gạch trên để chúng không chạm vào hay tiếp cận quá gần một ký tự. Điều này có thể hữu ích với một số phông chữ tiếng Trung, Nhật hoặc Hàn (CJK), khi hành vi
autocó thể không tạo ra các khoảng ngắt.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
text-decoration-skip-ink =
auto |
none |
all
Ví dụ
HTML
<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>
CSS
p {
font-size: 1.5em;
text-decoration: underline blue;
text-decoration-skip-ink: auto; /* this is the default anyway */
}
.no-skip-ink {
text-decoration-skip-ink: none;
}
.skip-ink-all {
text-decoration-skip-ink: all;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property |