Thuộc tính overflow trong CSS

Đôi khi bạn gặp trường hợp mà phải hiển thị một lượng nội dung lớn hơn nhiều phần không gian được cấp phát cho nó. Chương này sẽ trình bày cách xử lý vấn đề này.

CSS cung cấp thuộc tính overflow để nói cho trình duyệt điều gì cần phải làm nếu nội dung hiển thị của một hộp lớn hơn nhiều phần không gian đã cấp cho hộp đó. Thuộc tính này có thể nhận một trong các giá trị sau:

Thuộc tính overflow có thể nhận các giá trị:

visible: Phần nội dung bị tràn ra khỏi khu vực chứa nội dung của phần tử sẽ vẫn được hiển thị.
hidden: Ẩn phần nội dung bị tràn.
scroll: Phần nội dung bị tràn sẽ vẫn được hiển thị, nhưng trình duyệt cần cung cấp các phương thức để hiển thị phần nội dung này (ví dụ: scrollbar).
auto: Trình duyệt tự động xử lý xem có hay không hiển thị phần nội dung bị tràn.

Thuộc tính overflow áp dụng cho:

Tất cả phần tử HTML.

Cú pháp thuộc tính overflow trong DOM

object.style.overflow = "scroll";

Quảng cáo

Ví dụ minh họa thuộc tính overflow trong CSS

Bạn theo dõi ví dụ sau để thấy cách sử dụng của thuộc tính overflow trong CSS.

<html>
   <head>
   
      <style type="text/css">
         .scroll{
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto{
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
      
   </head>
   <body>
   
      <p>Vi du gia tri scroll cua thuoc tinh overflow trong CSS:</p>
      <div class="scroll">
      Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi 
      kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau 
      ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.
      </div>
      <br />
      
      <p>Vi du gia tri auto cua thuoc tinh overflow trong CSS:</p>
      
      <div class="auto">
      Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi 
      kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau 
      ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.
      </div>
      
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: