Code Thuộc tính white-space trong CSS

Code Thuộc tính white-space trong CSS

Code Thuộc tính white-space trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!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>
Code Thuộc tính white-space trong CSS nằm trong bài viết Thuộc tính white-space trong CSS