Cách đặt thụt dòng đầu (textIndent) bằng JavaScript

Thuộc tính textIndent chỉ định khoảng thụt lề của dòng đầu tiên trong một khối văn bản. Giá trị có thể là độ dài (px, em, rem, %) hoặc từ khóa each-line, hanging (CSS Text Level 3, hỗ trợ hạn chế). Giá trị âm tạo hiệu ứng "hàng treo" (hanging indent).

Ví dụ minh họa

Mã sau thụt dòng đầu 50px khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
  <div id="myText">
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
  </div>
  <br>
  <button onclick="setTextIndent()">Thụt dòng đầu</button>
  <script>
    function setTextIndent() {
      document.getElementById("myText").style.textIndent = "50px";
      /* Chỉ dòng đầu tiên bị thụt, các dòng sau (nếu wrap) không bị ảnh hưởng */
    }
  </script>
</body>
</html>

Giá trị và ứng dụng

Giá trị	Hiệu ứng	Dùng cho
`20px`, `2em`, `5%`	Thụt dòng đầu ra vào trong	Văn bản thông thường, bài báo, sách
`-20px`	Hàng treo (dòng đầu lùi ra ngoài)	Danh sách, bibliography, citation
`each-line`	Thụt dòng đầu + dòng sau `<br>`	Thơ, địa chỉ (hỗ trợ hạn chế)
`hanging`	Ngược lại: dòng đầu KHÔNG thụt, các dòng sau thụt	Danh sách, ghi chú (hỗ trợ hạn chế)

Lưu ý:

textIndent chỉ ảnh hưởng đến dòng đầu tiên của block container (hoặc dòng sau <br> nếu dùng each-line).
Dùng % tính theo width của containing block.
Không ảnh hưởng đến các phần tử inline-block/inline-flex con (chúng tự quản lý dòng của mình).
Kết hợp textIndent: -20px; padding-left: 20px; để tạo hanging indent an toàn (không bị cắt).