Thuộc tính white-space trong CSS
Bùi Tấn Lực - 888
- 01/10/2025
Chức năng của Thuộc tính white-space trong CSS
Thuộc tính white-space trong CSS dùng để quy định cách xuống dòng của các từ, khoảng trắng giữa các từ, khoảng cách giữa các phần tử con.
Cú pháp của Thuộc tính white-space trong CSS
white-space: giatri;
giatri: Giá trị để quy định cách xuống dòng của các từ, khoảng trắng giữa các từ, khoảng cách giữa các phần tử con (Ví dụ: normal, nowrap, pre, break-spaces, pre-line, pre-wrap)
Các giá trị của Thuộc tính white-space trong CSS
normal: Bỏ khoảng trắng ở đầu câu và cuối câu, ở trong câu nếu có nhiều khoảng trắng sẽ giữ lại một khoảng trắng, tự xuống dòng để phù hợp với phần tử chứa.
nowrap: Bỏ khoảng trắng ở đầu câu và cuối câu, ở trong câu nếu có nhiều khoảng trắng sẽ giữ lại một khoảng trắng, không tự xuống dòng.
pre: Khoảng trắng trong phần tử HTML như thế nào thì nó giữ nguyên, không tự xuống dòng, các phần tử con sẽ có thêm khoảng cách mặc định với nhau.
break-spaces: Khoảng trắng trong phần tử HTML như thế nào thì nó giữ nguyên, tự xuống dòng để phù hợp với phần tử chứa.
pre-line: Bỏ khoảng trắng ở đầu câu và cuối câu, ở trong câu nếu có nhiều khoảng trắng sẽ giữ lại một khoảng trắng, tự xuống dòng để phù hợp với phần tử chứa, các phần tử con sẽ có thêm khoảng cách mặc định với nhau.
pre-wrap: Khoảng trắng trong phần tử HTML như thế nào thì nó giữ nguyên, tự xuống dòng để phù hợp với phần tử chứa, các phần tử con sẽ có thêm khoảng cách mặc định với nhau.
Code Thuộc tính white-space trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính white-space trong CSS</title>
<style>
#divtong{width:300px;float:left;height:auto}
.mucdiv{width:100%; float:left; height:auto; margin-bottom:10px; background:#ddd; padding:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính white-space trong CSS</h1>
<p>Dùng để quy định cách xuống dòng của các từ, khoảng trắng giữa các từ, khoảng cách giữa các phần tử con:</p>
<div id="divtong">
<div class="mucdiv" style="white-space: normal">
<h3>white-space: normal</h3>
<p> Bỏ khoảng trắng ở đầu câu và cuối câu, ở trong câu nếu có nhiều khoảng trắng sẽ giữ lại một khoảng trắng, tự xuống dòng để phù hợp với phần tử chứa. </p>
</div>
<div class="mucdiv" style="white-space: nowrap">
<h3>white-space: nowrap</h3>
<p> Bỏ khoảng trắng ở đầu câu và cuối câu, ở trong câu nếu có nhiều khoảng trắng sẽ giữ lại một khoảng trắng, không tự xuống dòng. </p>
</div>
<div class="mucdiv" style="white-space: pre">
<h3>white-space: pre</h3>
<p> Khoảng trắng trong phần tử HTML như thế nào thì nó giữ nguyên, không tự xuống dòng, các phần tử con sẽ có thêm khoảng cách mặc định với nhau. </p>
</div>
<div class="mucdiv" style="white-space: break-spaces">
<h3>white-space: break-spaces</h3>
<p> Khoảng trắng trong phần tử HTML như thế nào thì nó giữ nguyên, tự xuống dòng để phù hợp với phần tử chứa. </p>
</div>
<div class="mucdiv" style="white-space: pre-line">
<h3>white-space: pre-line</h3>
<p> Bỏ khoảng trắng ở đầu câu và cuối câu, ở trong câu nếu có nhiều khoảng trắng sẽ giữ lại một khoảng trắng, tự xuống dòng để phù hợp với phần tử chứa, các phần tử con sẽ có thêm khoảng cách mặc định với nhau. </p>
</div>
<div class="mucdiv" style="white-space: pre-wrap">
<h3>white-space: pre-wrap</h3>
<p> Khoảng trắng trong phần tử HTML như thế nào thì nó giữ nguyên, tự xuống dòng để phù hợp với phần tử chứa, các phần tử con sẽ có thêm khoảng cách mặc định với nhau. </p>
</div>
</div>
</body>
</html>
Khi nào nên sử dụng thuộc tính white-space trong CSS?
white-space phát huy hiệu quả khi cách trình duyệt xử lý khoảng trắng, dấu xuống dòng và việc tự động ngắt dòng không phù hợp với cách hiển thị nội dung. Thay vì chỉ áp dụng cho văn bản thông thường, thuộc tính này đặc biệt hữu ích khi xây dựng giao diện có mã nguồn, tiêu đề, nhãn, dữ liệu dạng chuỗi hoặc nội dung cần kiểm soát chặt chẽ trên một dòng.
Giữ nguyên định dạng khoảng trắng và xuống dòng
Trong một số nội dung, khoảng trắng và dấu xuống dòng mang ý nghĩa trình bày nên không thể để trình duyệt tự xử lý như văn bản thông thường. Khi đó, white-space có thể được dùng để bảo toàn cách nội dung được viết trong HTML.
Cách này phù hợp với những đoạn văn bản cần giữ cấu trúc ban đầu, chẳng hạn nội dung được người dùng nhập vào, đoạn chú thích có nhiều khoảng trắng hoặc những dữ liệu cần duy trì xuống dòng theo từng phần.
<p style="white-space: pre-wrap;">
Dòng thứ nhất
Dòng thứ hai có khoảng trắng
Dòng thứ ba
</p>
Với pre-wrap, khoảng trắng và xuống dòng được giữ lại nhưng nội dung vẫn có thể tự xuống dòng khi không đủ chiều rộng. Đây thường là lựa chọn thực tế hơn khi nội dung có thể thay đổi theo kích thước màn hình.
Ngăn nội dung tự động xuống dòng
Khi một thành phần bắt buộc phải hiển thị trên một dòng, white-space: nowrap giúp ngăn trình duyệt tự động đưa phần nội dung xuống dòng mới. Cách này thường được sử dụng cho nút, nhãn, tiêu đề ngắn hoặc các đoạn văn bản mà việc xuống dòng có thể làm thay đổi bố cục.
.button {
white-space: nowrap;
}
Tuy nhiên, không nên áp dụng nowrap một cách tùy tiện cho nội dung dài. Nếu chiều rộng phần tử bị giới hạn, văn bản có thể tràn ra ngoài vùng hiển thị. Với nội dung có khả năng dài hoặc thay đổi theo thiết bị, cần kết hợp thêm cách xử lý phần nội dung bị tràn.
Xử lý văn bản dài trong giao diện website
Những chuỗi dài như tên sản phẩm, mã đơn hàng, địa chỉ hoặc tiêu đề do người dùng nhập có thể làm thay đổi kích thước thành phần nếu không được kiểm soát. white-space giúp xác định trước văn bản có được phép xuống dòng hay phải duy trì trên một dòng.
Ví dụ, một danh sách có nhiều tiêu đề ngắn có thể dùng nowrap để giữ giao diện gọn gàng. Ngược lại, nội dung mô tả dài nên cho phép xuống dòng để tránh tạo vùng tràn trên màn hình nhỏ.
Điểm quan trọng là lựa chọn giá trị dựa trên loại nội dung. Văn bản cần đọc đầy đủ nên ưu tiên khả năng xuống dòng, còn nội dung cần giữ một dòng thì mới nên hạn chế ngắt dòng.
Kết hợp white-space với overflow và text-overflow
white-space thường phát huy tác dụng tốt hơn khi kết hợp với overflow và text-overflow. Bộ ba thuộc tính này có thể tạo ra vùng văn bản một dòng, giới hạn phần hiển thị và thay thế phần bị cắt bằng dấu ba chấm.
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Trong ví dụ trên, nội dung được giữ trên một dòng nhờ white-space. Phần vượt khỏi kích thước của phần tử được che bởi overflow, còn text-overflow cho phép biểu thị phần nội dung bị cắt bằng dấu ba chấm.
Cách kết hợp này phù hợp với tiêu đề trong danh sách, tên sản phẩm, menu hoặc các khu vực có chiều rộng cố định. Khi thiết kế responsive, nên kiểm tra thêm trên màn hình nhỏ để bảo đảm nội dung quan trọng không bị cắt đến mức khó hiểu.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính white-space trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
