- Trang chủ
- Tham khảo
- CSS
- Thuộc tính white-space
Đị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:
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ụ |