Thuộc tính white-space

Đăng bởi: Admin

Định nghĩa và sử dụng

Thuộc tính white-space xác định khoảng trắng có bên trong thành phần được xử lý như thế nào.

Cấu trúc

tag {
    white-space: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
white-space	normal	white-space: normal;	Khoảng trắng sẽ thể hiện bình thường, đây là dạng mặc định.
	nowrap	white-space: nowrap;	Văn bản sẽ hiển thị trên cùng một hàng, chỉ xuống hàng khi gặp thẻ <br />.
	pre	white-space: pre;	Khoảng trắng sẽ do trình duyệt điều khiển, văn bản sẽ hiển thị trên cùng một hàng, chỉ ngắt dòng tại đoạn văn bản sử dụng thẻ <pre>.
	pre-line	white-space: pre-line;	Văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng.
	pre-wrap	white-space: pre-wrap;	Khoảng trắng sẽ do trình duyệt điều khiển, văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng.
	inherit	white-space: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ 
cho <span>thuộc tính white-space</span></p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ cho thuộc tính white-space

CSS viết:

p span {
    white-space: nowrap;
}

Hiển thị trình duyệt khi có CSS:

Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ cho thuộc tính white-space

Trên ví dụ trên ta đã dùng thuộc tính white-space: nowrap; cho thành phần <span>, do đó đoạn text trong thành phần <span> sẽ hiển thị trên cùng một dòng.

Trình duyệt hỗ trợ

Thuộc tính white-space được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

Link liên quan

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!