text-indent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính CSS text-indent xác định độ dài khoảng trắng (thụt lề) được đặt trước các dòng văn bản trong một khối.

Try it

text-indent: 0;

text-indent: 30%;

text-indent: -3em;

text-indent: 3em each-line;

text-indent: 3em hanging;

text-indent: 3em hanging each-line;

<section id="default-example">
  <div id="example-element">
    <p>
      This text is contained within a single paragraph. This paragraph is two
      sentences long.
    </p>
    <p>
      This is a new paragraph. There is a line break element
      <code>&lt;br&gt;</code> after this sentence.<br />There it is! Notice how
      it affects the indentation.
    </p>
  </div>
</section>

section {
  font-size: 1.25em;
  background-color: darkslateblue;
  align-items: start;
}

#example-element {
  text-align: left;
  margin-left: 3em;
  background-color: slateblue;
  color: white;
}

Khoảng cách ngang được tính so với cạnh trái (hoặc phải, đối với bố cục từ phải sang trái) của hộp nội dung của phần tử cấp khối chứa.

Cú pháp

css

/* Giá trị <length> */
text-indent: 3mm;
text-indent: 40px;

/* Giá trị <percentage>
   tương đối với chiều rộng khối chứa */
text-indent: 15%;

/* Giá trị từ khóa */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Giá trị toàn cục */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

Giá trị

<length>: Thụt lề được chỉ định là <length> tuyệt đối. Giá trị âm được cho phép. Xem <length> để biết các đơn vị có thể dùng.
<percentage>: Thụt lề là <percentage> của chiều rộng khối chứa.
each-line: Thụt lề ảnh hưởng đến dòng đầu tiên của container khối cũng như mỗi dòng sau ngắt dòng bắt buộc, nhưng không ảnh hưởng đến các dòng sau ngắt dòng mềm.
hanging: Đảo ngược các dòng nào được thụt lề. Tất cả các dòng trừ dòng đầu tiên sẽ được thụt lề.

Định nghĩa chính thức

Initial value	`0`
Applies to	block containers
Inherited	yes
Percentages	refer to the width of the containing block
Computed value	the percentage as specified or the absolute length, plus any keywords as specified
Animation type	a length, percentage or calc();

Cú pháp chính thức

text-indent = 
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?               

<length-percentage> = 
  <length>      |
  <percentage>

Ví dụ

Thụt lề cơ bản

HTML

html

<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

CSS

css

p {
  text-indent: 5em;
  background: powderblue;
}

Kết quả

Bỏ qua thụt lề ở đoạn văn đầu tiên

Một thực hành kiểu chữ phổ biến khi có thụt lề đoạn văn là bỏ qua thụt lề cho đoạn văn đầu tiên. Như The Chicago Manual of Style nêu: "dòng văn bản đầu tiên sau tiêu đề phụ có thể bắt đầu ở lề trái hoặc được thụt lề theo đoạn văn thông thường."

Xử lý đoạn văn đầu tiên khác với các đoạn văn tiếp theo có thể được thực hiện bằng cách sử dụng bộ kết hợp phần tử kế tiếp, như trong ví dụ sau:

HTML

html

<h2>Lorem ipsum</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
  metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
  blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
  non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
  amet porttitor dui interdum.
</p>

<p>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
  facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
  odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
  gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
  malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
  Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
  eleifend id. Ut at quam velit.
</p>

<p>
  Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.
</p>

CSS

css

p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}

Kết quả

Thụt lề theo phần trăm

HTML

html

<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

CSS

css

p {
  text-indent: 30%;
  background: plum;
}

Kết quả

Thông số kỹ thuật

Specification
CSS Text Module Level 3 # text-indent-property

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content