Thuộc tính text-decoration-skip-ink xác định cách gạch chân và gạch trên hiển thị khi đi qua ký tự. Thuộc tính này ảnh hưởng đến giao diện văn bản.
Cú pháp:
text-decoration-skip-ink: auto | none
Giá trị thuộc tính:
- auto: Giá trị này bỏ qua gạch chân và gạch trên đi qua ký tự. Đây là giá trị mặc định của thuộc tính.
- none: Giá trị này không bỏ qua gạch chân và gạch trên đi qua ký tự. Đường gạch sẽ cắt qua các ký tự như 'g' và 't'.
Các ví dụ dưới đây minh họa thuộc tính CSS text-decoration-skip-ink.
Ví dụ 1: Trong ví dụ này, ta sử dụng giá trị thuộc tính text-decoration-skip-ink: auto;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | text-decoration-skip-ink
</title>
<style>
.skip-ink-auto {
font-size: 2em;
text-decoration: underline green;
/* text decoration-skip-ink effect */
text-decoration-skip-ink: auto;
}
</style>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | text-decoration-skip-ink: auto;
</b>
<div class="skip-ink-auto">
A Computer Science portal for geeks
</div>
</center>
</body>
</html>
Đầu ra:
Ví dụ 2: Trong ví dụ này, ta sử dụng giá trị thuộc tính text-decoration-skip-ink: none;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | text-decoration-skip-ink
</title>
<style>
.skip-ink-none {
font-size: 2em;
text-decoration: underline green;
/* text decoration-skip-ink effect */
text-decoration-skip-ink: none;
}
</style>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | text-decoration-skip-ink: none;
</b>
<div class="skip-ink-none">
A Computer Science portal for geeks
</div>
</center>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính text-decoration-skip-ink được liệt kê dưới đây:
- Google Chrome 64
- Edge 79
- Firefox 70
- Opera 50
- Safari 15.4