Bố cục CSS - Phần tràn

Thuộc tính CSS overflowkiểm soát những gì xảy ra với nội dung quá lớn để vừa với 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. Nỗi đau chính là tình yêu Đó là lý do tại sao điều đó xảy ra một cách nhỏ nhặt nhất, những người mà hoạt động bình thường của chúng ta phải gánh chịu để tận dụng những hậu quả Nỗi đau của nỗi đau trong văn phòng ở Thế vận hội, hoặc nỗi đau trong phòng ở Thế vận hội, anh ta muốn trở thành một người khó chịu với hậu quả, hoặc anh ta đang chịu đựng nỗi đau của hệ thống miễn dịch eu ở sự thật, eros và người tiêu dùng, và sự căm ghét thường xuyên đối với zzril. Không còn sự lựa chọn nào để có một khoảng thời gian rảnh rỗi khi chúng ta thoát khỏi tuổi thiếu niên của mình Các loại không có sự rõ ràng vốn có

CSS Overflow

Thuộc overflowtính chỉ định cắt nội dung hoặc thêm thanh cuộn khi nội dung của một phần tử quá lớn để vừa với khu vực được chỉ định.

Thuộc overflowtính có các giá trị sau:

visible- Vỡ nợ. Phần tràn không được cắt bớt. Nội dung hiển thị bên ngoài hộp của phần tử
hidden - Phần tràn bị cắt bớt và phần còn lại của 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 ý: Thuộc overflowtính chỉ hoạt động đối với các phần tử khối có chiều cao được chỉ đị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 "tràn: cuộn" được đặt).

tràn: có thể nhìn thấy

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

Bạn có thể sử dụng thuộc tính tràn khi muốn kiểm soát bố cục tốt hơn. Thuộc tính tràn 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ử.

Thí dụ

div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}

tràn: ẩn

Với hiddengiá trị, phần tràn được cắt bớt và phần còn lại của nội dung bị ẩn:

Thí dụ

div {
overflow: hidden;
}

tràn: cuộn

Đặt giá trị thành scroll, 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ó):

Thí dụ

div {
overflow: scroll;
}

tràn: tự động

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

Thí dụ

div {
overflow: auto;
}

tràn-x và tràn-y

Các thuộc tính overflow-xvà overflow-ychỉ định xem có nên thay đổi phần tràn nội dung theo chiều ngang hay chiều dọc (hoặc cả hai):

overflow-xchỉ định những việc cần làm với các cạnh trái / phải của nội dung.
overflow-ychỉ định những việc cần làm với các cạnh trên / dưới của nội dung.

Thí dụ

div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}

Tất cả các thuộc tính bổ sung CSS

Property	Description
overflow	Specifies what happens if content overflows an element's box
overflow-wrap	Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x	Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y	Specifies what to do with the top/bottom edges of the content if it overflows the element's content area

❮ Trước Kế tiếp ❯

Hướng dẫn CSS

CSS nâng cao

CSS đáp ứng

Lưới CSS

CSS SASS

Ví dụ về CSS

Tham chiếu CSS

Bố cục CSS - Phần tràn

CSS Overflow

tràn: có thể nhìn thấy

Thí dụ

tràn: ẩn

Thí dụ

tràn: cuộn

Thí dụ

tràn: tự động

Thí dụ

tràn-x và tràn-y

Thí dụ

Kiểm tra bản thân với các bài tập

Bài tập:

Tất cả các thuộc tính bổ sung CSS