Bùi Tấn Lực - 24
- 01/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính white-space trong CSS
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á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}
#normal{white-space: normal}
#nowrap{white-space: nowrap}
#pre{white-space: pre}
#break-spaces{white-space: break-spaces}
#pre-line{white-space: pre-line}
#pre-wrap{white-space: pre-wrap}
</style>
</head>
<body>
<h1>Code Thuộc tính white-space trong CSS</h1>
<div id="divtong">
<div class="mucdiv" id="normal">
<h3>white-space: normal</h3>
<p>Hãy Chạy thử Code Thuộc tính white-space trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
<div class="mucdiv" id="nowrap">
<h3>white-space: nowrap</h3>
<p>Hãy Chạy thử Code Thuộc tính white-space trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
<div class="mucdiv" id="pre">
<h3>white-space: pre</h3>
<p>Hãy Chạy thử Code Thuộc tính white-space trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
<div class="mucdiv" id="break-spaces">
<h3>white-space: break-spaces</h3>
<p>Hãy Chạy thử Code Thuộc tính white-space trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
<div class="mucdiv" id="pre-line">
<h3>white-space: pre-line</h3>
<p>Hãy Chạy thử Code Thuộc tính white-space trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
<div class="mucdiv" id="pre-wrap">
<h3>white-space: pre-wrap</h3>
<p>Hãy Chạy thử Code Thuộc tính white-space trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
</div>
</body>
</html>
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 *
