white-space trong css là một trong những từ khóa được search nhiều nhất trên google về chủ đề white-space trong css. Trong bài viết này,xaydungweb.vn sẽ viết bài viết Hướng dẫn white-space trong css mới nhất 2020.
Hướng dẫn white-space trong css mới nhất 2020.
- Posted by: Thủy Trần Thanh
- bình luận
white-space xử lý khoảng trắng dạng trong CSS
bao giờ bạn tự hỏi tại sao khi bạn gõ một mớ khoảng trắng bằng phương pháp bấm 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ó vừa mới quyết định đến quy phương pháp hiển thị khoảng trắng của bạn trong đoạn văn ntn.
Giả sử ta có một đoạn văn như sau được gõ ở chế độ html.
normal
#results
white-space: normal;
width: 400px;
border: 1px solid #999;
Đây là trị giá mặc định trong css, trị giá này vừa mới quyết định đị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 định dạng văn bản sẽ k đượ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 giống như sẽ k tự động bẻ xuống định dạng tại khoảng trắng khi đoạn văn dài quá hộp bao nó, và loại 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. bên cạnh đó giá trị này không sử dụng việc đúng trên IE8.
pre-line
#results
white-space: pre-line;
width: 400px;
border: 1px solid red;
trị giá này gần giống với trị giá 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 k hoàn toàn hiểu trị giá này mà chúng hiển thị giống với trị giá 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à định dạng văn bản mới thực bằng hướng dẫn gõ phím enter sẽ được xác nhận. không những thế loại văn bản sẽ tự động xuống định dạng tại khoảng trắng khi nó vượt quá giới hạn của hộp. IE8 k hiểu giá trị này và hiển thị giống như trị giá mặc định.
