Thuộc tính white-space của CSS dùng để mô tả các khoảng trắng của đoạn văn bên trong thẻ chứa nó được xử lý như thế nào.
Các giá trị của thuộc tính white-space gồm:
inherit
normal
nowrap
pre
pre-line
pre-wrap
, trong đó giá trị nowrap có thể được dùng để thay thế cho thẻ <nobr>.
Ví dụ:
– Ở ví dụ này bạn sẽ thấy khi độ dài của đoạn văn vượt quá độ rộng của thẻ chứa thì đoạn văn sẽ tự độ xuống dòng:
<section style=”border:green thin solid; width:16%;”>Giá trị nowrap sẽ ngăn không cho xuống dòng nếu độ dài của chuỗi lớn hơn độ rộng của phần tử chứa nó.</section>
– Bây giờ ta thêm giá trị nowrap vào thì sẽ không còn hiện tượng xuống dòng nữa:
<section style=”border:green thin solid; width:16%; white-space:nowrap;”>Giá trị nowrap sẽ ngăn không cho xuống dòng nếu độ dài của chuỗi lớn hơn độ rộng của phần tử chứa nó.</section>
– Nếu bạn muốn ẩn đi phần đoạn văn vượt ra ngoài nhưng vẫn muốn có thể xem được phần đoạn văn đó bạn làm như sau:
<section style=”border:green thin solid; width:16%; white-space:nowrap; overflow:auto;”> Giá trị nowrap sẽ ngăn không cho xuống dòng nếu độ dài của chuỗi lớn hơn độ rộng của phần tử chứa nó.</section>
– Còn nếu bạn muốn ẩn hẳn đi phần đoạn văn vượt ra ngoài bạn làm như sau:
<section style=”border:green thin solid; width:16%; white-space:nowrap; overflow:hidden;”> Giá trị nowrap sẽ ngăn không cho xuống dòng nếu độ dài của chuỗi lớn hơn độ rộng của phần tử chứa nó.</section>
