Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

CSS overflow: hidden

Ẩn nội dung tràn (cắt bớt)

overflow: hidden cắt bỏ phần nội dung vượt ra khỏi hộp chứa, **không hiển thị thanh cuộn**, người dùng không thể truy cập phần bị ẩn.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: orange;
      width: 250px;
      height: 35px; /* Cao ít hơn nội dung */
      border: 2px solid blue;
      overflow: hidden; /* Cắt bớt, không cuộn */
    }
  </style>
</head>
<body>
  <h1>Tiêu đề</h1>
  <div>Nội dung demo dài... Phần vượt 35px sẽ bị ẩn hoàn toàn.</div>
</body>
</html>

Dùng cho: tạo hiệu ứng "read more", slider/carousel, chứa float (clearfix), cắt hình ảnh bo tròn.