Tekst-podkreślenie-przesunięcie - CSS-Tricks

text-underline-offsetNieruchomość w CSS ustawia odległość podkreślenia tekstu z ich pierwotnego położenia.

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

Po zastosowaniu podkreślenia dla elementu przy użyciu text-decorationwartości podkreślenia , możesz określić, jak daleko ta linia powinna znajdować się od tekstu, używając text-underline-offsetwłaściwości.

Wartości

• auto: (Domyślnie) Przeglądarka określi odpowiednie przesunięcie dla podkreślenia.
• : Dowolna poprawna długość z określoną jednostką (w tym wartości ujemne). Spowoduje to zastąpienie wszelkich informacji w czcionce i wartości domyślnej przeglądarki.
• percentage: Określa przesunięcie podkreślenia jako procent 1em w czcionce elementu.
• initial: Domyślne ustawienie właściwości, czyli auto.
• inherit: Przyjmuje wartość przesunięcia podkreślenia elementu nadrzędnego.
• unset: Usuwa bieżące odsunięcie z elementu.

Próbny

W poniższym demo możesz zmienić wartość, text-underline-offsetaby zobaczyć, jak wpływa na dekorację tekstu elementu:

Uwagi

• text-underline-offset nie jest częścią skrótu text-decoration.
• Nie działa na innych text-decorationliniach, takich jak line-throughlub overline.
• Akceptowane są wartości ujemne, co powoduje przesunięcie podkreślenia do wewnątrz.

Dla potomków jest stała

Gdy ustawisz dekorację elementu, wszystkie jego dzieci również będą miały tę dekorację. Teraz wyobraź sobie, że chcesz zmienić przesunięcie podkreślenia dla jednego z dzieci:

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

To nie działa, ponieważ nie można zastąpić przesunięcia podkreślenia określonego przez elementy nadrzędne. Aby to zadziałało, musisz ustawić podkreślenie specyficzności dla samego elementu:

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

Zalecane jest używanie em

Zaletą użycia wartości względnej, takiej jak em, jest to, że przesunięcie będzie skalowane wraz ze zmianą font-sizewartości. Z drugiej strony, jeśli używasz jednostki o stałej długości (np. Pikseli), przesunięcie nie dostosuje się do zmian i może nie być odległością, którą chciałbyś mieć dla swojego tekstu:

Procent i kaskada

W przypadku tej właściwości długość będzie dziedziczyć jako stała wartość i nie będzie skalowana wraz z czcionką. Z drugiej strony procent odziedziczy jako wartość względną, a zatem będzie skalowany wraz ze zmianami czcionki w miarę dziedziczenia.

Poniższe demo pokazuje porównanie użycia em i wartości procentowych w przypadku dziedziczenia i, jak widać, po lewej stronie (w której używamy em) odziedziczona wartość ma stałą długość. Obliczoną wartość można sprawdzić w DevTools. Oznacza to, że nie skaluje się wraz ze zmianą czcionki. Jednak po prawej stronie teksty dziedziczą względną wartość (w tym przypadku 100%); dlatego offset skaluje się wraz ze zmianą czcionki:

Tryby pisania i pozycja podkreślenia tekstu

Posiadanie pionowego trybu pisania ma wpływ na położenie podkreślenia. To zmieni kierunek odsunięcia zastosowanego na elemencie. Zagraj z wartościami w poniższym demo:

Związane z

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

Więcej informacji

Moduł dekoracji tekstu CSS, poziom 4 (wersja robocza redakcji)

Wsparcie przeglądarki

W chwili pisania tego tekstu Firefox jest jedyną przeglądarką z pełną obsługą. Safari nie obsługuje wartości procentowych.

tekst-podkreślenie-przesunięcie

TO ZNACZY	Brzeg	Firefox	Chrom	Safari	Opera
Nie	Nie	70+	Nie	12.1+	Wszystko

Android Chrome	Android Firefox	Przeglądarka Android	iOS Safari	Opera Mini
Nie	Nie	Nie	12.2+	tak

tekst-podkreślenie-przesunięcie: procent

TO ZNACZY	Brzeg	Firefox	Chrom	Safari	Opera
Nie	Nie	74+	Nie	Nie	Nie

Android Chrome	Android Firefox	Przeglądarka Android	iOS Safari	Opera Mini
Nie	Nie	Nie	Nie	tak