white-space xử lý khoảng trắng dòng trong CSS

Có khi nào bạn tự hỏi tại sao khi bạn gõ một mớ khoảng trắng bằng cách nhấn phím space liên tiếp cho đoạn văn mà bạn soạn ở chế độ html thì khi hiển thị nó cũng chỉ hiển thị là một khoảng trắng, thậm chí khoảng trắng bạn cố tình gõ ở đầu dòng thì bị loại bỏ khi hiển thị. Chúng ta sẽ tìm hiểu về thuộc tính white-space trong CSS và các giá trị của nó đã quyết định đến quy cách hiển thị khoảng trắng của bạn trong đoạn văn như thế nào.

Giả sử ta có một đoạn văn như sau được gõ ở chế độ html.

<div id="results">
      HTML5 có lẽ là công nghệ đến muộn và mạnh mẽ nhất,                   nhưng một số trình duyệt vẫn chưa hổ trợ những thẻ mới trong HTML5, sau đây chúng ta sẽ cùng tìm hiểu những giải pháp để giải quyết vấn đề này.
Từ phiên bản IE8 trở xuống không hổ trợ các phần tử trong HTML5, cũng giễ hiểu bởi vì khi chúng ra đời HTML5 vẫn chưa phát triển.
</div>

normal

#results {
   white-space: normal;
   width: 400px;
   border: 1px solid #999;
}

Đây là giá trị mặc định trong css, giá trị này đã quyết định dòng văn bản của bạn sẽ tự bẻ xuống tại khoảng trắng khi nó tới giới hạn của hộp bao nó, và cơ chế loại bỏ các khoảng trắng liên tiếp nhau cũng như khoảng trắng nằm ở đầu đoạn văn.

nowrap

#results {
   white-space: normal;
   width: 200px;
   border: 1px solid red;
}

Giá trị này sẽ loại bỏ các khoảng trắng thừa nhưng dòng văn bản sẽ không được bẻ xuống khi nó dài quá chiềug rộng hộp bao nó.

pre

 #results {
   white-space: pre;
   width: 400px;
   border: 1px solid red;
}

Giá trị này sẽ không loại bỏ khoảng trắng thừa cũng như sẽ không tự động bẻ xuống dòng tại khoảng trắng khi đoạn văn dài quá hộp bao nó, và dòng văn bản mà bạn tạo bằng cách gõ phím enter sẽ được hiển thị đúng như vậy. Tuy nhiên giá trị này không làm việc đúng trên IE8.

pre-line

#results {
   white-space: pre-line;
   width: 400px;
   border: 1px solid red;
}

Giá trị này gần giống với giá trị mặc định normal chỉ có điều là dòng văn bản mà bạn tự gõ enter xuống sẽ được công nhận và hiển thị là một dòng mới. Phiên bản IE8 thì lại không hoàn toàn hiểu giá trị này mà chúng hiển thị giống với giá trị mặc định.

pre-wrap

#results {
   white-space: pre-wrap;
   width: 400px;
   border: 1px solid red;
}

Giá trị này sẽ không loại bỏ khoảng trắng thừa và dòng văn bản mới thực bằng cách gõ phím enter sẽ được công nhận. Tuy nhiên dòng văn bản sẽ tự động xuống dòng tại khoảng trắng khi nó vượt quá giới hạn của hộp. IE8 không hiểu giá trị này và hiển thị như giá trị mặc định.