Text-underline-offset - Thủ thuật CSS

Các text-underline-offsetbất động sản trong CSS đặt khoảng cách gạch dưới văn bản từ vị trí ban đầu của họ.

.text ( text-underline-offset: 0.5em; )

Khi bạn áp dụng một gạch dưới cho một phần tử sử dụng text-decorationvới giá trị của gạch dưới , bạn có thể nói dòng đó phải cách văn bản của bạn bao xa bằng cách sử dụng thuộc text-underline-offsettính.

Giá trị

• auto: (Mặc định) Trình duyệt sẽ chỉ định một khoảng bù thích hợp cho gạch dưới.
• : Bất kỳ độ dài hợp lệ nào với một đơn vị được chỉ định (bao gồm các giá trị âm). Điều này thay thế bất kỳ thông tin nào trong phông chữ và mặc định của trình duyệt.
• percentage: Chỉ định độ lệch của gạch chân dưới dạng phần trăm 1em trong phông chữ của phần tử.
• initial: Cài đặt mặc định của thuộc tính, là cài đặt tự động.
• inherit: Thông qua giá trị bù đắp gạch dưới của giá trị gốc.
• unset: Loại bỏ độ lệch hiện tại khỏi phần tử.

Bản giới thiệu

Trong bản trình diễn sau, bạn có thể thay đổi giá trị của text-underline-offsetđể xem nó ảnh hưởng như thế nào đến trang trí văn bản của phần tử:

Ghi chú

• text-underline-offset không phải là một phần của tốc ký của text-decoration.
• Nó không hoạt động trên các text-decorationdòng khác , chẳng hạn như line-throughhoặc overline.
• Các giá trị âm được chấp nhận, giá trị này sẽ bù lại phần gạch chân bên trong.

Nó không đổi cho con cháu

Sau khi bạn đặt trang trí cho một phần tử, tất cả các phần tử con của nó cũng sẽ có trang trí đó. Bây giờ, hãy tưởng tượng bạn muốn thay đổi độ lệch của gạch dưới cho một trong các phần tử con:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Điều này không hoạt động vì bạn không thể ghi đè phần bù của một gạch dưới được chỉ định bởi các phần tử tổ tiên. Để điều này hoạt động, bạn cần đặt một đặc điểm gạch dưới cho chính phần tử:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Sử dụng em được khuyến khích

Lợi ích của việc sử dụng một giá trị tương đối như em là phần bù sẽ mở rộng với sự thay đổi của font-sizegiá trị. Mặt khác, nếu bạn sử dụng một đơn vị độ dài cố định (ví dụ: pixel), độ lệch sẽ không điều chỉnh theo những thay đổi và nó có thể không phải là khoảng cách mà bạn muốn có cho văn bản của mình:

Tỷ lệ phần trăm và tầng

Đối với thuộc tính này, độ dài sẽ kế thừa như một giá trị cố định và sẽ không thay đổi tỷ lệ theo phông chữ. Mặt khác, một tỷ lệ phần trăm sẽ kế thừa như một giá trị tương đối và do đó, tỷ lệ với những thay đổi trong phông chữ khi nó kế thừa.

Bản trình diễn sau đây cho thấy sự so sánh giữa việc sử dụng em và giá trị phần trăm trong trường hợp kế thừa và như bạn có thể thấy, ở phía bên trái (trong đó chúng tôi đang sử dụng em) giá trị được thừa kế là một độ dài cố định. Bạn có thể kiểm tra giá trị được tính toán trong DevTools của mình. Điều đó có nghĩa là nó không thay đổi tỷ lệ với sự thay đổi trong phông chữ. Tuy nhiên, ở phía bên phải, các văn bản kế thừa một giá trị tương đối (trong trường hợp này là 100%); do đó bù đắp tỷ lệ với sự thay đổi trong phông chữ:

Chế độ viết và văn bản-gạch chân-vị trí

Có một chế độ viết dọc có ảnh hưởng đến vị trí của gạch dưới. Điều đó sẽ thay đổi hướng của độ lệch được áp dụng trên phần tử. Chơi với các giá trị trong bản demo sau:

Có liên quan

• text-decoration
• text-underline-position
• text-decoration-thickness

Thêm thông tin

Mô-đun trang trí văn bản CSS cấp độ 4 (Bản thảo của người biên tập)

Hỗ trợ trình duyệt

Tại thời điểm viết bài này, Firefox là trình duyệt duy nhất được hỗ trợ đầy đủ. Safari không hỗ trợ giá trị phần trăm.

text-underline-offset

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	Không	70+	Không	12,1+	Tất cả

Chrome dành cho Android	Android Firefox	Trình duyệt Android	iOS Safari	Opera Mini
Không	Không	Không	12,2+	Đúng

text-underline-offset: phần trăm

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	Không	74+	Không	Không	Không

Chrome dành cho Android	Android Firefox	Trình duyệt Android	iOS Safari	Opera Mini
Không	Không	Không	Không	Đúng