Khi nào nên dùng thay vì ?

Dùng khi việc xuống dòng là một phần của chính nội dung, như trong địa chỉ hay bài thơ. Dùng các phần tử riêng cho từng đoạn văn, và margin trong CSS để tạo khoảng cách, thay vì xếp chồng nhiều thẻ .

Tài liệu HTML chạy trực tiếp: Xuống dòng

Q: Làm sao xuống dòng trong HTML?

Chèn vào chỗ dòng mới cần bắt đầu: Line one Line two. Nhấn Enter trong tệp HTML không có tác dụng, vì trình duyệt coi ký tự xuống dòng trong mã nguồn là khoảng trắng bình thường.

Q: Nên viết , hay ?

Cả ba đều chạy được trong HTML và tạo ra cùng một phần tử. là dạng HTML thuần; các dạng có dấu gạch chéo được chấp nhận để tương thích với XHTML và JSX. Riêng là không hợp lệ, dù trình duyệt vẫn đọc nó như một lần xuống dòng nữa.

Q: Làm sao giữ các lần xuống dòng trong văn bản mà không cần thêm thẻ ?

Gán cho phần tử white-space: pre-line trong CSS. Khi đó trình duyệt hiển thị mọi ký tự xuống dòng trong văn bản thành một lần xuống dòng, nhưng vẫn gộp các khoảng trắng thừa. Cách này rất tiện cho bình luận của người dùng và văn bản được nạp bằng JavaScript.

Q: Làm sao ngăn xuống dòng trong HTML?

Bọc văn bản trong một phần tử có white-space: nowrap, hoặc nối hai từ bằng khoảng trắng không ngắt để chúng luôn nằm trên cùng một dòng.

Xuống dòng trong HTML: thẻ br, ký tự xuống dòng và điểm ngắt

Dùng để bắt đầu một dòng mới bên trong một khối văn bản. Tìm hiểu khi nào là đúng và khi nào nên dùng đoạn văn, cách giữ ký tự xuống dòng trong văn bản, cách cho từ dài được ngắt với và cách ngăn một dòng bị ngắt.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Cách xuống dòng

Đặt   vào chỗ bạn muốn dòng mới bắt đầu. Đây là phần tử rỗng nên không có thẻ đóng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

Địa chỉ được ngắt dòng đúng tại mỗi  . Đoạn thứ hai vẫn nằm trên một dòng dù mã nguồn có ký tự xuống dòng: HTML coi ký tự xuống dòng, tab và chuỗi khoảng trắng liên tiếp là một khoảng trắng duy nhất. Đó là lý do   tồn tại.

 ,   và   đều tạo ra cùng một phần tử. Hãy dùng dạng mà dự án của bạn đang dùng (JSX và XHTML bắt buộc có dấu gạch chéo).

br và p: ngắt dòng không phải là tạo khoảng cách

  kết thúc một dòng bên trong cùng một đoạn văn. Một thẻ  mới bắt đầu một đoạn văn mới, có khoảng cách phía trên và phía dưới từ margin mặc định. Xếp chồng nhiều thẻ   để tạo khoảng cách vẫn chạy, nhưng dễ vỡ và mang sai ý nghĩa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

Hai khung trông gần giống nhau, nhưng với trình đọc màn hình thì khung đầu chỉ là một đoạn văn, và muốn đổi khoảng cách thì phải sửa từng trang. Ở khung thứ hai, khoảng cách chỉ là một dòng CSS.

Những chỗ nên dùng  : địa chỉ, thơ và lời bài hát, các dòng trong chữ ký, nơi việc xuống dòng thuộc về chính văn bản. Với mọi thứ khác, hãy dùng đoạn văn, danh sách hoặc tiêu đề.

Giữ ký tự xuống dòng trong văn bản

Khi văn bản đến từ nơi khác (một ô bình luận, cơ sở dữ liệu, một script), nó chứa ký tự xuống dòng thật thay vì thẻ  . Thuộc tính CSS white-space: pre-line khiến trình duyệt hiển thị các ký tự đó thành những lần xuống dòng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

Cùng một chuỗi hiện trên một dòng trong khung xám và trên ba dòng trong khung xanh. Cách này cũng an toàn hơn việc chèn thẻ   vào văn bản của người dùng bằng innerHTML, vốn cho phép người dùng chèn HTML vào trang. Để giữ cả khoảng trắng và thụt lề, dùng white-space: pre, được giới thiệu ở trang khoảng trắng trong HTML.

Cho từ dài được ngắt: wbr

Một từ hoặc URL dài không có khoảng trắng có thể tràn ra khỏi một khung hẹp.  đánh dấu chỗ mà trình duyệt được phép ngắt dòng khi cần, và không làm gì trong các trường hợp khác:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

Đường dẫn đầu tiên tràn ra ngoài khung; đường dẫn thứ hai được ngắt tại các điểm . Với văn bản bạn không kiểm soát được, thuộc tính CSS overflow-wrap: anywhere sẽ ngắt từ dài ở bất kỳ chỗ nào.

Ngăn một dòng bị ngắt

Đôi khi bạn muốn điều ngược lại: giữ "10 km" hay một số điện thoại liền nhau. Có hai công cụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  là một khoảng trắng mà trình duyệt sẽ không ngắt dòng tại đó, nên "10" và "km" luôn đi cùng nhau. white-space: nowrap giữ cả một span trên một dòng. Thay   bằng khoảng trắng thường, hoặc bỏ class đi, thì ở độ rộng này cả hai đều bị tách ra hai dòng.

Lỗi thường gặp

Nhấn Enter trong mã nguồn và mong có dòng mới. Ký tự xuống dòng trong HTML là khoảng trắng. Dùng  , các phần tử riêng hoặc white-space: pre-line.
Xếp chồng   để tạo khoảng cách. Dùng đoạn văn và margin.
Dùng   để tạo danh sách. Dùng <ul> hoặc <ol> với <li>, thứ mà trình đọc màn hình đọc như một danh sách.
Viết . Cách viết này không hợp lệ. Hãy viết  .
Thêm   vào văn bản của người dùng bằng innerHTML. Thay vào đó, gán textContent và dùng white-space: pre-line.

Câu hỏi thường gặp

Làm sao xuống dòng trong HTML?

Chèn   vào chỗ dòng mới cần bắt đầu: Line one Line two. Nhấn Enter trong tệp HTML không có tác dụng, vì trình duyệt coi ký tự xuống dòng trong mã nguồn là khoảng trắng bình thường.

Nên viết , hay ?

Cả ba đều chạy được trong HTML và tạo ra cùng một phần tử.   là dạng HTML thuần; các dạng có dấu gạch chéo được chấp nhận để tương thích với XHTML và JSX. Riêng  là không hợp lệ, dù trình duyệt vẫn đọc nó như một lần xuống dòng nữa.

Khi nào nên dùng thay vì ?

Dùng   khi việc xuống dòng là một phần của chính nội dung, như trong địa chỉ hay bài thơ. Dùng các phần tử  riêng cho từng đoạn văn, và margin trong CSS để tạo khoảng cách, thay vì xếp chồng nhiều thẻ  .

Làm sao giữ các lần xuống dòng trong văn bản mà không cần thêm thẻ ?

Gán cho phần tử white-space: pre-line trong CSS. Khi đó trình duyệt hiển thị mọi ký tự xuống dòng trong văn bản thành một lần xuống dòng, nhưng vẫn gộp các khoảng trắng thừa. Cách này rất tiện cho bình luận của người dùng và văn bản được nạp bằng JavaScript.

Làm sao ngăn xuống dòng trong HTML?

Bọc văn bản trong một phần tử có white-space: nowrap, hoặc nối hai từ bằng khoảng trắng không ngắt   để chúng luôn nằm trên cùng một dòng.

Khái niệm liên quan