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ố.
Thuộc tính OVerflow xác định điều gì sẽ xảy ra nếu thành phần box tràn nội dung, hôm trước mình đã đọc được bài viết của Aditya trên một nhóm Web Design khá hay cho nên hôm nay muốn chia sẻ cho các bạn cần. Master chỉ trong một bài viết này, học thôi nào!
Overflow là gì?
Thuộc tính tràn css kiểm soát cách nội dung bên trong vùng chứa hoạt động khi nó tràn qua các thân vùng chứa.
Tại sao lại cần sử dụng tính chất?
Giả sử ta có một một div với chiều cao cố định là 260px và nội dung bên trong nó tràn [ Overflow] ra khỏi div vì nội dung bên trong lớn hơn chiều cao của div. Vậy làm cách nào để fix vấn đề này ? :]
Nội dung bên trong lớn hơn chiều cao div
Một số loại overflow...
1. Visible
Khi thuộc tính overflow có giá trị là visible thì phần nội dung bị tràn không bị cắt đi và nội dung bị tràn ra sẽ ghi đè lên các phần tử khác.
Sau đây là giá trị mặc định, bất kỳ nội dung nào tràn vùng chứa sẽ hiển thị.
visible-overflow
2. Hidden
Khi thuộc tính overflow có gí trị là hidden thì phần nội dung bị tràn ra sẽ bị cắt đi và phần nội dung đó sẽ ẩn đi.
Ẩn bất kỳ nội dung nào tràn ra khỏi vùng chứa, để hiểu cụ thể hơn xem hình ảnh sau.
hidden-overflow
3. Auto
Khi thuộc tính overflow có giá trị là auto thì khi đó sẽ xuất hiện thanh scroll vì chiều cao của box không đủ để chứa text.
auto sẽ chỉ thêm thanh cuộn khi được sử dụng, nó thường là tùy chọn ưu tiên hơn.
auto-overflow
4. Scroll
Khi thuộc tính overflow có giá trị là scroll sẽ xuất hiện thanh scroll ngang và dọc. Vì chiều cao của box không đủ chưa text, nên text bị tràn sẽ được dấu đi và xuất hiện thanh scroll, khi cuộn sẽ hiển thị text.
scroll-overflow
5. Overflow-X
Thuộc tính overflow-X cho phép điều khiển nội dung bị tràn theo chiều ngang [nghĩa là bên trái [left] và bên phải [right] của phần tử]
Thuộc tính overflow-x cũng có giá trị như visible, hidden, auto, scroll.
thuộc tính overflow-x
6. Overflow-Y
Thuộc tính overflow-y cho phép điều khiển nội dung bị tràn theo chiều dọc [nghĩa là bên trên [top] và bên dưới [bottom] của phần tử].