Pozycja-podkreślenia-tekstu - CSS-Tricks

Anonim

text-underline-positionWłaściwość określa umiejscowienie podkreślenie na linki lub na tekst z text-decoration: underline;Stosowanej.

a ( text-underline-position: under; )

Wartości

Oto wartości określone w rekomendacji kandydata dla modułu dekoracji tekstu CSS W3C na poziomie 3:

  • auto: domyślny. Przeglądarka zdecyduje, czy umieścić podkreślenie na linii bazowej tekstu, czy pod nim.
  • inherit: dziedziczy podkreślenie elementu nadrzędnego.
  • under: umieszcza podkreślenie pod tekstem z dodatkową spacją, aby zapobiec przecinaniu się w dół.
  • left: dla pionowych trybów pisania. Spowoduje to umieszczenie linii po lewej stronie tekstu.
  • right: dla pionowych trybów pisania. Spowoduje to umieszczenie linii po prawej stronie tekstu.

Firma Microsoft używa innego zestawu wartości dla przeglądarki Internet Explorer:

  • auto: domyślny. Umieszcza podkreślenie pod tekstem dla wszystkich języków oprócz japońskiego (szczegółowe informacje można znaleźć pod linkiem MSDN w sekcji „Więcej informacji” poniżej).
  • above: umieszcza podkreślenie nad tekstem. Wizualnie identyczny ztext-decoration: overline;
  • below: umieszcza podkreślenie pod tekstem. Zauważ, że różni się to od under- nie wyczyści zjazdów.
  • auto-posdziała tak samo jak implementacja MS auto.

Próbny

W chwili pisania tego tekstu text-underline-positionjest tylko częściowo obsługiwany przez Chrome (33+ z włączonymi flagami eksperymentalnymi) i Internet Explorer 6+. Chrome obsługuje wartości auto, inheriti underz rekomendacji kandydata W3C, podczas gdy IE obsługuje własne wartości alternatywne.

To demo pokazuje wartości underi beloww przeglądarkach, które je obsługują.

Zobacz pozycję podkreślenia tekstu pisaka według CSS-Tricks (@ css-tricks) w CodePen.

Związane z

  • dekoracja tekstu

Więcej informacji

  • text-underline-position w module dekoracji tekstu CSS, poziom 3 CR.
  • text-underline-position w MSDN.

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
33 * Żaden Żaden Żaden 6 † Żaden Żaden

* z -webkitprefiksem i flagami eksperymentalnymi włączonymi w chrome: // flags. lefta rightwartości nie są obsługiwane.
† z -msprefiksem i wartościami specyficznymi dla IE.