Cho dù bạn tạo ra các bố cục từ đầu hoặc tuỳ biến những bố cục được thiết kế trước, bạn có thể sẽ gặp phải một số vấn đề về sắp xếp.
Ví dụ, bạn có một hình ảnh anh hùng ở đầu trang chủ. Bên dưới bạn có một vài yếu tố phân chia chứa văn bản. Có lẽ nó trông giống như bản demo của trang chủ SEO WP dưới đây.
Nguồn ảnh.
Bây giờ tưởng tượng một trong ba đoạn văn bên dưới các tiêu đề có nhiều câu thay vì một. Điều này sẽ khiến văn bản quá lớn để phù hợp với khu vực được chỉ định của nó và có khả năng khiến nó trùng với các yếu tố khác trên trang. Điều này được gọi là quá tải trong CSS.
Điều gì là quá tải trong CSS?
Trong CSS, overflow đề cập đến bất kỳ nội dung nào quá lớn đối với khung yếu tố. Điều này xảy ra khi một nguyên tố khối có chiều cao được chỉ định quá nhỏ so với nội dung nó chứa. Bạn có thể sử dụng tài sản tràn ngập CSS để kiểm soát những gì xảy ra với tình trạng tràn ngập.
Trước khi chúng ta xem xét kỹ hơn về tài sản tràn đầy, hãy làm rõ ý nghĩa của hộp các yếu tố. Theo mô hình hộp CSS, một hộp hình chữ nhật được tạo cho các yếu tố HTML. Hộp này được tạo thành từ bốn lớp : nội dung chính nó, lớp đệm, đường viền và mép bên dưới được minh hoạ bên dưới.
Nguồn ảnh.
Khi nội dung của một phần tử HTML mở rộng ra ngoài bất kỳ ô nào có mép cho dù đó là mép nội dung, mép lót, mép bên biên, hoặc cạnh rìa nó được gọi là overflow.
Tài sản tràn đầy CSS
Thuộc tính overflow của CSS cung cấp một vài tuỳ chọn để kiểm soát overflow. Bạn có thể để nội dung hiển thị bên ngoài khung yếu tố, cắt nội dung hoặc cắt nội dung và thêm thanh cuộn. Để làm điều này, bạn cần sử dụng các giá trị tài sản sau :. Hãy nhìn lại gần hơn.
Hình ảnh tràn đầy CSS Visible
Visible có nghĩa là dòng dư thừa sẽ không bị cắt. Thay vào đó, nó sẽ hiển thị bên ngoài khung các yếu tố và có khả năng trùng lặp với các yếu tố khác trên trang.
Theo mặc định, tài sản tràn đầy CSS được đặt để hiển thị. Ý nghĩa, bạn không cần thiết lập tài sản tràn đầy CSS để hiển thị, trừ khi bạn đã gõ sai sang CSS trong bảng chữ cái bên ngoài hoặc một nơi khác trên trang của bạn.
Hãy nhìn vào một ví dụ.
Đây là CSS :.
Đây là HTML :.
Đây là kết quả :.
Nguồn ảnh.
Đắp đầy CSS bị ẩn
Để che đùn quá tải từ việc hiển thị bên ngoài khung yếu tố, bạn có thể đặt tính năng đùn quá tải để ẩn. Điều này sẽ kẹp nội dung ở mép khung và không cho phép người dùng xem nội dung bên ngoài mép đó bằng cách cuộn hoặc kéo ngón tay của họ trên màn hình cảm ứng hoặc bất kỳ phương tiện nào khác,
Tuy nhiên, giá trị này vẫn cho phép cuộn chương trình, có nghĩa hộp là một container cuộn. Một người dùng có thể sử dụng các cơ chế được định nghĩa bởi Mô-đun quan sát CSSOM, ví dụ, để xem nội dung ẩn.
Hãy nhìn vào một ví dụ :.
Đây là CSS :.
Đây là HTML :.
Đây là kết quả :.
Nguồn ảnh.
Rộp tràn đầy CSS
Nếu bạn muốn che đắm quá tải từ việc hiển thị bên ngoài khung yếu tố nhưng cho phép người dùng xem nội dung đó, bạn có thể đặt tính năng overflow để cuộn. Vết tràn vẫn sẽ bị kẹp ở mép lót hộp. Tuy nhiên, thanh cuộn hoặc thanh khung sẽ được thêm vào để người dùng có thể cuộn để xem nội dung không hiển thị.
Đây là một ví dụ.
Đây là CSS :.
Đây là HTML :.
Đây là kết quả :.
Nguồn ảnh.
Ô tô tràn đầy CSS
Giá trị tự động tương tự như cuộn nhưng chỉ thêm một thanh cuộn khi khung đã tràn qua.
Trong ví dụ bên dưới, cả hai phân đoạn được xác định với overflow : auto. Tuy nhiên, chỉ có một phân đoạn có thể cuộn và một thanh cuộn.
Đây là CSS :.
Đây là HTML :.
Đây là kết quả :.
Nguồn ảnh.
Lưu ý : Bootstrap CSS chỉ hỗ trợ hai giá trị cho tài sản overflow, theo mặc định, bao gồm các giá trị tự động và bí mật.
Trong các ví dụ trên, chúng tôi đã sử dụng tài sản vượt dòng chữ viết tắt. Đây là viết tắt của các tính chất overflow-x và overflow-y. Chúng ta hãy nhìn kỹ hơn vào hai đặc tính lâu dài dưới đây.
CSS Overflow-x
Thuộc tính overflow-x được sử dụng để kiểm soát overflow ngang, hoặc overflow từ bên trái và bên phải của khung yếu tố.
Hãy nhìn vào một ví dụ bên dưới.
Đây là CSS :.
