Thụt lề văn bản - Thủ thuật CSS

Anonim

Các text-indentquy định cụ thể sở hữu bao nhiêu văn bản không gian ngang nên được chuyển trước khi bắt đầu dòng đầu tiên của nội dung văn bản của một phần tử. Khoảng cách được tính từ cạnh bắt đầu của phần tử vùng chứa cấp khối.

Cạnh bắt đầu thường ở bên trái, nhưng có thể ở bên phải nếu ở chế độ từ phải sang trái, ala thuộc tính hướng.

Các text-indenttài sản được thừa hưởng khi quy định trên một yếu tố ngăn chặn, mà có nghĩa là nó sẽ ảnh hưởng đến các yếu tố hậu duệ inline-block là tốt. Khi đối phó với những đứa trẻ khối nội tuyến, bạn có thể muốn ép buộc chúng text-indent: 0;.

Cú pháp

text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )

Một trường hợp sử dụng phổ biến sẽ đơn giản là phong cách. Thụt lề dòng đầu tiên của đoạn văn là kiểu cũ và có thể gợi lên cảm giác đó. Nó có thể được sử dụng thay cho khoảng cách sau các đoạn văn như một chỉ báo trực quan thay thế, mặc dù nói chung khoảng cách có thể dễ đọc hơn.

Một trường hợp sử dụng phổ biến khác là trong "thay thế hình ảnh" trong đó văn bản bị loại bỏ khỏi phần tử thông qua phần tràn văn bản và ẩn.

treo cổ

hanginglà một giá trị thử nghiệm và không chính thức cho text-indenttài sản. Nó đảo ngược dòng nào được thụt vào. Về cơ bản, nó thụt lề mọi dòng trừ dòng đầu tiên, dẫn đến một số loại dấu câu treo.

Giá trị này là một cờ, đi cùng với một giá trị chung như độ dài.

từng dòng

each-linelà một giá trị thử nghiệm và không chính thức cho text-indenttài sản. Ý tưởng là thụt lề mỗi dòng sau khi ngắt dòng bắt buộc (với a
).

Giá trị này là một cờ, đi cùng với một giá trị chung như độ dài.

Bản giới thiệu

Xem phần thụt lề văn bản Pen của Chris Coyier (@chriscoyier) trên CodePen.

Hỗ trợ trình duyệt

Hỗ trợ cơ bản

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
bất kì bất kì bất kì 3,5+ 3+ bất kì bất kì

giá trị treo

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

giá trị mỗi dòng

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