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

Anonim

Các text-underline-positionbất động sản thiết lập vị trí của gạch dưới vào liên kết hoặc trên văn bản với text-decoration: underline;ứng dụng.

a ( text-underline-position: under; )

Giá trị

Đây là các giá trị được chỉ định trong Đề xuất ứng viên cấp 3 của Mô-đun trang trí văn bản CSS W3C:

  • auto: mặc định. Trình duyệt sẽ quyết định giữa việc đặt gạch dưới ở đường cơ sở của văn bản hoặc dưới nó.
  • inherit: kế thừa vị trí gạch dưới của cha.
  • under: đặt gạch chân dưới văn bản với khoảng trống thừa để ngăn việc vượt qua các dấu xuống.
  • left: cho các chế độ viết dọc. Điều này đặt dòng bên trái của văn bản.
  • right: cho các chế độ viết dọc. Điều này đặt dòng ở bên phải của văn bản.

Microsoft sử dụng một bộ giá trị khác cho Internet Explorer:

  • auto: mặc định. Đặt gạch chân bên dưới văn bản cho tất cả các ngôn ngữ ngoại trừ tiếng Nhật (xem liên kết MSDN trong phần “Thông tin thêm” bên dưới để biết chi tiết).
  • above: vị trí gạch dưới phía trên văn bản. Trực quan giống vớitext-decoration: overline;
  • below: đặt gạch chân bên dưới văn bản. Lưu ý rằng điều này khác với under- nó sẽ không xóa các phần tử giảm dần.
  • auto-poshoạt động giống như triển khai MS của auto.

Bản giới thiệu

Tại thời điểm viết bài này, text-underline-positionchỉ được hỗ trợ một phần bởi Chrome (33+ có bật cờ thử nghiệm) và Internet Explorer 6+. Chrome hỗ trợ auto, inheritvà undercác giá trị từ sự giới thiệu ứng cử viên W3C, trong khi IE hỗ trợ giá trị thay thế riêng của mình.

Bản trình diễn này hiển thị các giá trị undervà belowgiá trị trong các trình duyệt hỗ trợ chúng.

Xem vị trí văn bản-gạch dưới-bút của CSS-Tricks (@ css-trick) trên CodePen.

Có liên quan

  • trang trí văn bản

Thêm thông tin

  • text-underline-position trong Mô-đun trang trí văn bản CSS cấp 3 CR.
  • text-underline-position tại MSDN.

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
33 * không ai không ai không ai 6 † không ai không ai

* với -webkittiền tố và cờ thử nghiệm được bật trong chrome: // flags. leftvà rightcác giá trị không được hỗ trợ.
† với -mstiền tố và các giá trị dành riêng cho IE.