Bài 21:Thuộc Tính Overflow Trong CSS | Tìm ở đây

Trong css thuộc tính overflow điều khiển khi nội dung phần tử vượt quá kích thước của một khu vực.

Văn bản này thực sự dài và chiều cao của vùng chứa chỉ là 100 pixel. Do đó, một thanh cuộn được thêm vào để giúp người đọc cuộn nội dung. Ví dụ: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ullamcorper suscipit lobortis nisl ut aliquip ex ea Goodsoequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse moltieequat, vel illum dolore eu feugiat nulla Operatingisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril xóanit augue duis dolore te feugait nulla. Nam liber tempor kiêm soluta nobis eleifend option congue nihil khiếm khuyết doming id quod mazim placerat facer possim giả sử. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

CSS Overflow

Thuộc tính overflow chỉ định dù cắt phần nội dung hay thêm thanh cuộn khi nội dung của một phần tử vượt quá kích thước của một khu vực quy định.

Các thuộc tính overflow có giá trị sau:

• visible– Mặc định. Phần tràn không được cắt đi. Nội dung hiển thị lên các phần tử bên ngoài hộp.
• hidden – Phần tràn bị cắt bớt và phần nội dung đó sẽ không hiển thị.
• scroll – Phần tràn được cắt bớt và một thanh cuộn được thêm vào để xem phần còn lại của nội dung
• auto– Tương tự như scroll, nhưng nó chỉ thêm thanh cuộn khi cần thiết

Lưu ý: Các thuộc tính overflow chỉ hoạt động cho các phần tử khối với chiều cao xác định.Lưu ý:Trong OS X Lion (trên Mac), thanh cuộn được ẩn theo mặc định và chỉ hiển thị khi được sử dụng (ngay cả khi “ overflow:scroll” được đặt).

overflow: visible

Theo mặc định, overflow:visible, có nghĩa là nó không bị cắt bớt và nó hiển thị lên các phần tử bên ngoài hộp:

Bạn có thể sử dụng thuộc tính overflow khi bạn muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn vào hộp của phần tửVí dụ: div { width: 200px; height: 50px; background-color: #eee; overflow: visible; }

overflow: hidden

Với giá trị là hidden, phần tràn được cắt bớt và phần nội dung đó sẽ không hiển thị:

Bạn có thể sử dụng thuộc tính overflow khi bạn muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn vào hộp của phần tử

Ví dụ:

div { overflow: hidden; }

overflow: scroll

Đặt giá trị thànhscroll, phần tràn sẽ được cắt bớt và một thanh cuộn được thêm vào để cuộn bên trong hộp. Lưu ý rằng điều này sẽ thêm một thanh cuộn theo cả chiều ngang và chiều dọc (ngay cả khi bạn không cần nó):

Bạn có thể sử dụng thuộc tính overflow khi bạn muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn vào hộp của phần tử

Ví dụ:

div { overflow: scroll; }

overflow: auto

Giá trị auto tương tự như scroll, nhưng nó bổ sung thêm thanh cuộn chỉ khi cần thiết:

Bạn có thể sử dụng thuộc tính overflow khi bạn muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn vào hộp của phần tử

Ví dụ:

div { overflow: auto; }

overflow-x and overflow-y

Thuộc tính overflow-x và overflow-y xác định xem có nên thay đổi phần nội dung bị tràn theo chiều ngang hay chiều dọc (hoặc cả hai):

overflow-x xác định những việc cần làm với các cạnh trái / phải của nội dung(nội dung bị tràn theo chiều ngang).

overflow-y xác định những việc cần làm với các cạnh trên / dưới của nội dung(nội dung bị tràn theo chiều dọc).

Bạn có thể sử dụng thuộc tính overflow khi bạn muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra nếu nội dung tràn vào hộp của phần tử

Ví dụ:

div { overflow-x: hidden; overflow-y: scroll; }

Tất cả các thuộc tính Overflow trong CSS

Thuộc tính	Miêu tả
overflow	Xác định điều gì sẽ xảy ra nếu nội dung tràn ra các phần tử bên ngoài hộp
overflow-x	Xác định những việc cần làm với các cạnh trái / phải của nội dung nếu nó làm tràn vùng nội dung của phần tử
overflow-y	Chỉ định những việc cần làm với các cạnh trên / dưới của nội dung nếu nó làm tràn vùng nội dung của phần tử