Bài viết này trình bày cách sử dụng thuộc tính tràn CSS với nhiều ví dụ.
Làm cách nào để sử dụng Thuộc tính tràn-y trong CSS?
CSS “ tràn-y ” thuộc tính được sử dụng để kiểm soát việc tràn nội dung dọc theo trục chéo bên trong một phần tử. Nó chỉ định nên cắt nội dung hay thêm thanh cuộn khi nội dung vượt quá chiều cao của vùng chứa. Các giá trị có thể có cho thuộc tính này là “ dễ thấy ”, “ ẩn giấu ”, “ cuộn ', Và ' tự động ”.
Chúng ta hãy xem các ví dụ dưới đây để minh họa rõ hơn về thuộc tính tràn-y:
Ví dụ 1: Sử dụng Hiển thị làm Giá trị cho Thuộc tính tràn-y
Các ' dễ thấy ” giá trị cho phép nội dung tràn ra khỏi vùng chứa và không thêm bất kỳ đoạn cắt hoặc thanh cuộn nào. Truy cập khối mã thực tế bên dưới:
< lớp div = 'cha mẹ' phong cách = 'tràn-y: có thể nhìn thấy;' >
< lớp div = 'nội dung con' > Đây chỉ là giả nội dung được sử dụng để trình diễn thuộc tính tràn-y khi thuộc tính này được đặt ở chế độ hiển thị.
>
>
Mô tả của khối mã trên:
- Đầu tiên, gán một giá trị của “ cha mẹ ” đến “ lớp học ” thuộc tính và sử dụng thuộc tính “ phong cách ' thuộc tính.
- Ngoài ra, hãy cung cấp giá trị của “ dễ thấy ” đến CSS “ tràn-y ' tài sản. Và đặt nó bằng với “ phong cách ” để làm cho kiểu dáng CSS hoạt động.
- Tiếp theo, tạo một “ div ” và gán cho nó một lớp là “ connội dung ”. Ngoài ra, cung cấp dữ liệu giả cho nó.
Bây giờ, hãy sử dụng các thuộc tính CSS để nâng cao khả năng hiển thị giúp hiểu rõ hơn về thuộc tính tràn CSS:
.cha mẹ {chiều rộng : 200px ;
chiều cao : 150px ;
ranh giới : 1px chất rắn đen ;
}
.childContent {
chiều cao : 300px ;
màu nền : xanh nhạt ;
}
Mô tả các thuộc tính CSS được đưa ra dưới đây:
- Đầu tiên ' cha mẹ ” lớp được chọn và các giá trị của “ 200px ”, “ 150px ', Và ' 1px màu đen đặc ” được gán cho CSS “ chiều rộng ”, “ chiều cao ', Và ' ranh giới ” thuộc tính, tương ứng.
- Tiếp theo, chọn “ connội dung ” lớp và thiết lập các giá trị của “ 300px ' Và ' xanh nhạt ” đến CSS “ chiều cao ' Và ' màu nền ” thuộc tính, tương ứng. Lớp này được mở rộng cho “ cha mẹ ” lớp được kiểm soát bởi CSS “ tràn ra ' tài sản.
Sau khi biên dịch các đoạn mã, trang web sẽ xuất hiện như sau:
Ảnh chụp nhanh hiển thị nội dung tràn hiện đã hiển thị và thanh cuộn hoặc đoạn cắt không được thêm theo mặc định.
Ví dụ 2: Sử dụng Ẩn làm Giá trị cho Thuộc tính tràn-y
Các ' tràn-y ” tài sản có giá trị “ ẩn giấu ” ẩn tất cả nội dung di chuyển ra ngoài vùng chứa chính của nó. Thuộc tính này không thêm thanh cuộn thay vào đó nó cắt bớt nội dung bị tràn:
< lớp div = 'cha mẹ' phong cách = 'tràn-y: ẩn;' >
< lớp div = 'nội dung con' > Đây chỉ là giả nội dung được sử dụng để trình diễn thuộc tính tràn-y khi thuộc tính này được đặt thành ẩn. Đây chỉ là giả nội dung được sử dụng để trình diễn thuộc tính tràn-y khi thuộc tính này được đặt thành ẩn.
>
>
Đoạn mã trên chứa:
- Đầu tiên, mã tương tự được chèn lại với sự gia tăng nội dung giả được đặt bên trong phần tử div bên trong.
- Tiếp theo, thay đổi giá trị của “ tràn-y ” tài sản để “ ẩn giấu ” đến “ ” thẻ có một lớp “ cha mẹ ”.
Sau khi kết xuất lại trang web trông như thế này:
Ảnh chụp nhanh hiển thị rằng nội dung tràn đã được cắt bớt.
Ví dụ 3: Sử dụng Scroll làm Giá trị cho Thuộc tính tràn-y
Đặt giá trị của “ tràn-y ” tài sản cho “ cuộn ” cho phép người dùng cuối cuộn qua
nội dung tràn nó. Hãy để chúng tôi truy cập khối mã dưới đây:
< lớp div = 'cha mẹ' phong cách = 'tràn-y: cuộn;' >
< lớp div = 'nội dung con' > Đây chỉ là giả nội dung được sử dụng để trình diễn thuộc tính tràn-y khi thuộc tính này được đặt ở chế độ hiển thị. Đây chỉ là giả nội dung được sử dụng để trình diễn thuộc tính tràn-y khi thuộc tính này được đặt ở chế độ hiển thị.
>
>Trong khối mã trên:
- Đầu tiên, cùng một cấu trúc HTML đã được chèn vào bên trong “ ' nhãn.
- Tiếp theo, thay đổi giá trị của “ tràn-y ” tài sản cho “ cuộn ”. Điều này cho phép “ cha mẹ ” div để kích hoạt hiệu ứng cuộn để kiểm soát nội dung bị tràn.
Sau khi biên dịch khối mã trên, trang web xuất hiện như sau:
Gid ở trên minh họa rằng hiệu ứng cuộn đã có sẵn để kiểm soát nội dung bị tràn.
Ví dụ 4: Sử dụng Auto làm Giá trị cho Thuộc tính tràn-y
Trong ví dụ này, người dùng chỉ có thể thêm thanh cuộn nếu nội dung không vừa với vùng chứa. Ngoài ra, nếu nội dung không tràn thì thanh cuộn sẽ không được thêm vào. Có thể bằng cách cung cấp giá trị của “ tự động ” đến CSS “ tràn-y ' tài sản:
< lớp div = 'cha mẹ' phong cách = 'tràn-y: auto;' >
< lớp div = 'nội dung con' > Đây chỉ là giả nội dung được sử dụng để trình diễn thuộc tính tràn-y khi thuộc tính này được đặt ở chế độ hiển thị. Đây chỉ là giả nội dung được sử dụng để trình diễn thuộc tính tràn-y khi thuộc tính này được đặt ở chế độ hiển thị.
>
>Trong khối mã trên:
- Đầu tiên, chèn cùng một tệp HTML bên trong “ ' nhãn.
- Tiếp theo, cập nhật giá trị của “ tràn-y ” tài sản để “ tự động ”. Nó cho phép hiệu ứng cuộn tương ứng với độ dài dọc của nội dung.
Sau khi kết thúc quá trình biên dịch, trang web hoạt động như sau:
Ảnh gif trên hiển thị thuộc tính tràn đã kích hoạt thanh cuộn theo độ dài của nội dung.
Phần kết luận
CSS “ tràn-y ” thuộc tính được sử dụng để kiểm soát nội dung bị tràn dọc theo trục chéo bên trong một phần tử. Thuộc tính tràn-y kiểm soát nội dung theo giá trị cụ thể được cung cấp cho thuộc tính tràn-y. Các ' thị giác ” giá trị hiển thị nội dung bị tràn, giá trị “ ẩn giấu ” giá trị ẩn nội dung tràn và “ cuộn ” giá trị thêm một thanh cuộn để kiểm soát nội dung. Và nếu giá trị là “ tự động ” thanh cuộn thêm hoặc bớt tùy theo độ dài của nội dung.