Văn bản-trang trí-bỏ qua - Thủ thuật CSS

Anonim

Các text-decoration-skipquy định cụ thể tài sản, nơi một văn bản gạch dưới, overline, hoặc tấn công qua nên phá vỡ. Điều này cải thiện tính dễ đọc của văn bản được trang trí và sửa ngữ pháp dấu câu cho một số ngôn ngữ.

Đây là một ví dụ:

a ( text-decoration-skip: ink; )

Đứng lên! Các inkgiá trị đã được thay đổi một đặc tính hoàn toàn mới, text-decoration-skip-ink: auto;.

Nếu trình duyệt của bạn hỗ trợ thuộc tính này thì bạn sẽ nhận thấy ở đây rằng các dấu giảm dần của mỗi ký tự (như “y” và “p”) có các khoảng trắng nhỏ xung quanh đường viền:

Xem phần Pen text-decoration-bỏ qua bằng CSS-Tricks (@ css-trick) trên CodePen.

Nếu trình duyệt của bạn không hỗ trợ tính năng này thì đây là những gì bạn nên mong đợi từ thuộc tính trong trình duyệt hỗ trợ:

văn bản-trang trí-bỏ qua minh họa

text-decoration-skip trong OSX và iOS

Vào cuối năm 2014, Apple đã thực hiện một thay đổi đối với text-decorationtrình duyệt Safari và iOS bắt chước cách thức text-decoration-skip: ink;hoạt động. Mặc dù không có text-decoration-skipgiá trị nào được triển khai chính thức, nhưng bạn có thể tắt hành vi mặc định này với -webkit-text-decoration-skip: none;.

Xem Pen -webkit-text-decoration-ignore: none; bằng CSS-Tricks (@ css-trick) trên CodePen.

Có liên quan

  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Thêm thông tin


  • Bản thảo của người biên tập mô-đun trang trí văn bản CSS cấp 4
  • text-decoration-skip tại MSDN.
  • Thảo luận về việc thêm trailing-spacesdưới dạng giá trị từ danh sách gửi thư W3C.
  • Cải thiện khả năng đọc văn bản cho người dùng mắc chứng khó đọc với gạch chân bỏ mực
  • văn bản-trang trí-bỏ qua trên MDN
  • văn bản-trang trí-bỏ qua-mực trên MDN

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
91 87 Không 88 TP.

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *