Tạo Ngắt Dòng (Line Break) Không Dùng Thẻ <br> trong HTML

Có thể thêm ngắt dòng cho các phần tử HTML mà không cần thẻ <br> bằng cách sử dụng pseudo-elements. Pseudo-elements dùng để định dạng một phần cụ thể của phần tử. Ở đây chúng ta dùng ::after để thêm ngắt dòng.

Cách thực hiện với ::after

span {
  padding: 1px 8px;
}
span::after {
  content: '\a';      /* Ký tự carriage return */
  white-space: pre;   /* Giữ khoảng trắng, bắt buộc để ngắt dòng hoạt động */
}

Code trên dùng ::after trên mỗi phần tử inline (<span>) để chèn ký tự xuống dòng (\a) sau văn bản. Thuộc tính white-space: pre bắt buộc vì mặc định span là inline-block, không giữ khoảng trắng.

Vấn đề với Padding và Background

Nếu thêm padding và background cho span, background sẽ bị đứt quãng ở vị trí ngắt dòng do pseudo-element không mang background của phần tử cha.

span {
  padding: 1px 8px;
  background: pink;
}
span::before {  /* hoặc ::after */
  content: "\A";
  white-space: pre;
}

CSS property box-decoration-break: clone có thể khắc phục một phần, nhưng không cho kết quả hoàn hảo.

Giải pháp tốt hơn: display: table

Thay vì pseudo-element, hãy dùng display: table cho span. Cách này làm code sạch hơn và cho layout chính xác:

span {
  display: table;
  padding: 1px 8px;
  background: pink;
}

Sử dụng display: table không phải dùng table layout truyền thống, nhưng nó cho phép phần tử inline có chiều cao, chiều rộng và ngắt dòng tự nhiên.

Kết luận

Có thể tạo ngắt dòng không dùng <br> bằng pseudo-element ::after kèm content: '\a'; white-space: pre. Tuy nhiên, cách tốt hơn và sạch hơn là dùng display: table (hoặc display: block, flex, grid) tùy theo ngữ cảnh.