22. Overflow Trong CSS

Overflow trong CSS: thuộc tính overflow được sử dụng để xác định cách xử lý nội dung bên trong một phần tử khi nội dung đó vượt quá kích thước của phần tử đó. Có một số giá trị cho thuộc tính overflow:

visible (mặc định): Nội dung vượt quá kích thước của phần tử sẽ được hiển thị ra ngoài khung của phần tử, gây ra việc che lấp của các phần tử khác.
hidden: Nội dung vượt quá kích thước của phần tử sẽ bị ẩn đi và không hiển thị.
scroll: Một thanh cuộn ngang và một thanh cuộn dọc sẽ xuất hiện để cho phép người dùng cuộn nội dung bị ẩn đi.
auto: Tự động thêm thanh cuộn nếu nội dung vượt quá kích thước của phần tử, ngược lại sẽ không hiển thị thanh cuộn.

Dưới đây là một ví dụ sử dụng thuộc tính overflow:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Overflow Example</title>
</head>
<body>
  <div class="container">
    <p>This is some long content that will overflow the container.</p>
  </div>
</body>
</html>

CSS (styles.css):

css

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: hidden; /* Cố định phần tử nội dung bị ẩn */
}

Trong ví dụ này, chúng ta có một phần tử .container với kích thước rộng 200px và cao 100px. Nội dung trong phần tử <p> vượt quá kích thước của .container, nhưng do chúng ta đã đặt overflow thành hidden, nội dung bị ẩn đi và không hiển thị. Điều này tạo ra một hiệu ứng cắt ngang nội dung nằm ngoài khung của phần tử.

Leave a Comment Cancel Reply