CSS3: White-space | V1Study

Trang chủ » Chỉnh White Space » CSS3: White-space | V1Study

Có thể bạn quan tâm

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>

Từ khóa » Chỉnh White Space