- Trang chủ
- Tham khảo
- CSS
- Thuộc tính white-space
Định nghĩa và sử dụngThuộ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úctag {
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ẻ . | | 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-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ụMô 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> white-space normal white-space: normal; p span {
white-space: nowrap;
}Khoảng trắng sẽ thể hiện bình thường, đây là dạng mặc định. normal thuộc tính white-space 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; nowrap - Văn bản không bao giờ xuống dòng, nó chỉ xuống dòng khi gặp white-space xác định cách thức xử lý các dấu khoảng trắng & xuống dòng trong phần tử. pre <p>HTML cực kỳ dễ học. Đồng thời,
chúng tôi xin giới thiệu
đến các bạn loạt Tài liệu hướng dẫn học
HTML đã được biên soạn kỹ lưỡng theo trình tự từ
cơ bản đến nâng cao kèm
theo nhiều
ví dụ minh họa đơn giản dễ hiểu. Hứa hẹn
sẽ giúp bạn đọc dễ dàng tiếp thu ngôn
ngữ HTML trong thời gian ngắn
nhất với khối lượng kiến thức đầy đủ nhất.</p>
- Giữ nguyên các dấu khoảng trắng & xuống dòng. - Văn bản chỉ được xuống dòng khi gặp dấu xuống dòng hoặc pre-wrap white-space, ta có thể giữ nguyên các dấu khoảng trắng & xuống dòng. HTML cực kỳ dễ học. Đồng thời,
chúng tôi xin giới thiệu
đến các bạn loạt Tài liệu hướng dẫn học
HTML đã được biên soạn kỹ lưỡng theo trình tự từ
cơ bản đến nâng cao kèm
theo nhiều
ví dụ minh họa đơn giản dễ hiểu. Hứa hẹn
sẽ giúp bạn đọc dễ dàng tiếp thu ngôn
ngữ HTML trong thời gian ngắn
nhất với khối lượng kiến thức đầy đủ nhất.
pre-line HTML cực kỳ dễ học. Đồng thời,
chúng tôi xin giới thiệu
đến các bạn loạt Tài liệu hướng dẫn học
HTML đã được biên soạn kỹ lưỡng theo trình tự từ
cơ bản đến nâng cao kèm
theo nhiều
ví dụ minh họa đơn giản dễ hiểu. Hứa hẹn
sẽ giúp bạn đọc dễ dàng tiếp thu ngôn
ngữ HTML trong thời gian ngắn
nhất với khối lượng kiến thức đầy đủ nhất.
- Các dấu xuống dòng sẽ được giữ nguyên.initial white-space, ta dùng cú pháp như sau: white-space: normal|nowrap|pre|pre-wrap|pre-line|initial|inherit;
- Sử dụng giá trị mặc định của nó.white-space có thể được xác định bởi một trong bảy loại:
| normal | - Các dấu khoảng trắng liên tiếp sẽ bị gộp lại thành một. - Các dấu xuống dòng sẽ bị bỏ qua. - Văn bản sẽ được xuống dòng khi cần thiết.
| Xem ví dụ | | nowrap | - Các dấu khoảng trắng liên tiếp sẽ bị gộp lại thành một. - Các dấu xuống dòng sẽ bị bỏ qua. - Văn bản sẽ được xuống dòng khi cần thiết.
| Xem ví dụ | | nowrap | - Văn bản không bao giờ xuống dòng, nó chỉ xuống dòng khi gặp pre
| Xem ví dụ | | nowrap | - Văn bản không bao giờ xuống dòng, nó chỉ xuống dòng khi gặp - Văn bản sẽ được xuống dòng khi cần thiết.
| Xem ví dụ | | nowrap | - Các dấu khoảng trắng liên tiếp sẽ bị gộp lại thành một. - Các dấu xuống dòng sẽ được giữ nguyên. - Văn bản sẽ được xuống dòng khi cần thiết.
| Xem ví dụ | | initial | - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính white-space có giá trị là normal)
| Xem ví dụ | | initial | - Sử dụng giá trị mặc định của nó.
| Xem ví dụ |
| 
