Thuộc tính text-underline-position trong CSS
Bùi Tấn Lực - 862
- 02/10/2025
Chức năng của Thuộc tính text-underline-position trong CSS
Thuộc tính text-underline-position trong CSS kết hợp với giá trị underline của text-decoration để quy định vị trí của đường gạch chân, thuộc tính này còn kết hợp với giá trị underline của thuộc tính text-decoration-line, vị trí đường gạch chân thường chưa qua hết phần dưới của các chữ hoặc vừa qua hết phần dưới của các chữ.
Cú pháp của Thuộc tính text-underline-position trong CSS
text-underline-position: giatri;
giatri: Giá trị để quy định vị trí của đường gạch chân (Ví dụ: auto, from-font, left, right, under)
Code Thuộc tính text-underline-position trong CSS
text-underline-position: auto;
text-underline-position: from-font;
text-underline-position: left;
text-underline-position: right;
text-underline-position: under;
text-decoration-line: underline;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-underline-position trong CSS</title>
<style>
.underline-don{text-decoration: underline;}
.underline-line{text-decoration-line: underline; }
</style>
</head>
<body>
<h1>Code Thuộc tính text-underline-position trong CSS</h1>
<p>Thuộc tính text-underline-position trong CSS kết hợp với giá trị underline của text-decoration để quy định vị trí của đường gạch chân, thuộc tính này còn kết hợp với giá trị underline của thuộc tính text-decoration-line, vị trí đường gạch chân thường chưa qua hết phần dưới của các chữ hoặc vừa qua hết phần dưới của các chữ:</p>
<p class="underline-don" style="text-underline-position: auto;">text-underline-position: auto; CO<sub>2</sub></p>
<p class="underline-don" style="text-underline-position: from-font;">text-underline-position: from-font; CO<sub>2</sub></p>
<p class="underline-don" style="text-underline-position: left;">text-underline-position: left; CO<sub>2</sub></p>
<p class="underline-don" style="text-underline-position: right;">text-underline-position: right; CO<sub>2</sub></p>
<p class="underline-don" style="text-underline-position: under;">text-underline-position: under; CO<sub>2</sub></p>
</body>
</html>
Các giá trị của thuộc tính text-underline-position trong CSS
Thuộc tính text-underline-position cho phép xác định vị trí của đường gạch chân so với phần chữ. Mỗi giá trị phù hợp với một nhu cầu trình bày khác nhau, đặc biệt khi muốn tránh đường gạch chân chạm vào ký tự hoặc làm ảnh hưởng đến khả năng đọc.
Giá trị auto và from-font
Giá trị auto để trình duyệt tự lựa chọn vị trí gạch chân phù hợp với kiểu chữ và cách hiển thị. Đây là lựa chọn đơn giản khi không cần kiểm soát vị trí đường gạch chân quá chi tiết.
Với from-font, trình duyệt ưu tiên thông tin về vị trí gạch chân được thiết lập bên trong phông chữ. Nếu phông chữ không cung cấp thông tin cần thiết, trình duyệt sẽ sử dụng cách xử lý mặc định.
Giá trị under
Giá trị under đặt đường gạch chân bên dưới phần chữ, hạn chế việc đường gạch chân cắt qua các ký tự có phần kéo dài xuống dưới dòng. Cách này hữu ích khi muốn giữ nội dung dễ đọc trong các đoạn văn hoặc liên kết có gạch chân.
p {
text-underline-position: under;
}
Giá trị left và right
Hai giá trị left và right được sử dụng để xác định vị trí đường gạch chân theo phía trái hoặc phải của chữ khi văn bản được trình bày theo chiều dọc. Chúng phù hợp hơn với các bố cục sử dụng văn bản dọc thay vì nội dung tiếng Việt thông thường.
p {
writing-mode: vertical-rl;
text-underline-position: left;
}
Khi thiết kế giao diện có văn bản dọc, việc chọn đúng vị trí giúp đường gạch chân không gây vướng mắt và giữ được sự nhất quán giữa các thành phần.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-underline-position trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
