- Thông thường, khi "nội dung" của thành phần có form size vượt vượt phạm vi phần nội dung của phần tử thì mang định nội dung có khả năng sẽ bị tràn ra ngoài, tùy vào kích thước của nó cơ mà nó sẽ tràn tới vùng đệm, mặt đường viền, hoặc tràn ra khỏi phần tử luôn, tạo mất thẩm mỹ và làm đẹp nghiêm trọng so với trang web.Bạn đang xem: chế tạo thanh cuộn dọc vào html
- ví dụ như bộ phận có đường viền greed color bên dưới, tấm hình nằm phía bên trong nó có độ cao vượt quá kích thước của nó, vì vậy tấm hình đã bị tràn ra bên ngoài.
Bạn đang xem: Tạo thanh cuộn dọc trong html
- mặc dù nhiên, với việc thực hiện thuộc tính overflow thì chúng ta có thể khắc phục được tình trạng phía trên, khi nội dung bị tràn ra ngoài thì chúng ta cũng có thể tùy chỉnh ẩn phần văn bản bị tràn ra bên ngoài, tốt là tạo những thanh cuộn dồn phần tử, . . . .
1) Cách thực hiện thuộc tính overflow vào CSS
- Để áp dụng thuộc tính overflow thì chúng ta dùng cú pháp như sau:
overflow: value;- vào đó, value rất có thể được xác định dựa theo 1 trong sáu loại giá trị:
| visible | - Khi câu chữ của bộ phận có form size vượt thừa phạm vi phần nội dung của bộ phận thì nội dung có khả năng sẽ bị tràn ra ngoài. | Xem ví dụ |
| hidden | - Khi văn bản của bộ phận có kích thước vượt vượt phạm vi phần nội dung của thành phần thì nội dung sẽ bị tràn ra ngoài (nội dung có thể tràn tới vùng đệm, nhưng không thể tràn tới đường viền, cũng chính vì phần văn bản bị tràn tới mặt đường viền hoặc tràn ra khỏi phần tử sẽ bị ẩn đi) | Xem ví dụ |
| auto | - Khi nội dung của phần tử có size vượt quá phạm vi phần content của phần tử thì bộ phận sẽ tự động hóa tạo ra các thanh scroll. Nếu chiều rộng lớn của nội dung có kích cỡ vượt vượt phạm vi chiều rộng của phần nội dung thì thành phần sẽ tạo nên thanh scroll ngang.Nếu độ cao của nội dung có form size vượt quá phạm vi độ cao của phần content thì bộ phận sẽ tạo thành thanh scroll dọc. | Xem ví dụ |
| scroll | - thành phần luôn luôn luôn tạo ra hai mẫu thanh scroll ngang & dọc (mặc cho văn bản của nó có kích cỡ vượt quá phạm vi phần content của nó xuất xắc không) | Xem ví dụ |
| initial | - áp dụng giá trị khoác định của nó. (mặc định thì thuộc tính overflow có giá trị là visible) | Xem ví dụ |
| inherit | - thừa kế giá trị ở trong tính overflow từ phần tử cha của nó. | Xem ví dụ |
2) Cách sử dụng thuộc tính overflow-x với overflow-y trong CSS
- Khi chúng ta thiết lập trực thuộc tính overflow cho một trong những phần tử thì mang định "chiều ngang & chiều dọc của phần tử sẽ gồm chung một phương pháp xử lý khi câu chữ của nó vượt thừa phạm vi phần nội dung của nó"
- lấy ví dụ như thành phần có đường viền greed color bên phải, tôi tùy chỉnh thiết lập cho nó nằm trong tính overflow với giá trị auto, thì cũng như các bạn đã thấy: "khi nội dung phía bên trong nó có kích cỡ vượt quá phạm vi phần content của nó thì cả chiều ngang & chiều dọc của thành phần đều có chung một phương pháp xử lý, đó chính là tạo ra thanh scroll"
- mặc dù nhiên, vì một lý do nào đó mà tôi không muốn có cả nhì thanh scroll ngang cùng dọc, tôi chỉ việc thanh scroll dọc, còn phần nội dung bị tràn ra bên ngoài theo chiều ngang thì ẩn nó đi, . . . . để triển khai được điều này thì họ cần phải thực hiện thế nào !?
- Để giải quyết và xử lý vấn đề được đưa ra ở phía trên, khi nội dung của phần tử có size vượt quá phạm vi phần nội dung của phần tử, cố vì sử dụng thuộc tính overflow để xử lý phần ngôn từ tràn ra phía bên ngoài thì hiện giờ chúng ta thay đổi lại dùng hai ở trong tính overflow-x cùng overflow-y. |
- thuộc tính overflow-x dùng để làm xử lý phần nội dung bị tràn ra phía bên ngoài (theo chiều ngang)
- thuộc tính overflow-y dùng để làm xử lý phần câu chữ bị tràn ra bên ngoài (theo chiều dọc)
- Để áp dụng thuộc tính overflow-x thì bọn họ dùng cú pháp như sau:
overflow-x: value;- trong đó, value hoàn toàn có thể được xác minh dựa theo một trong những sáu loại giá trị:
| visible | - Khi câu chữ của bộ phận có form size vượt quá phạm vi chiều rộng lớn phần nội dung của bộ phận thì nội dung sẽ ảnh hưởng tràn ra ngoài. |
| hidden | - Khi ngôn từ của thành phần có kích thước vượt thừa phạm vi chiều rộng phần content của bộ phận thì nội dung sẽ tràn ra bên ngoài (nội dung có thể tràn tới vùng đệm, nhưng tất yêu tràn tới đường viền, bởi vì phần ngôn từ bị tràn tới đường viền hoặc tràn ra khỏi phần tử sẽ bị ẩn đi) |
| auto | - Khi ngôn từ của phần tử có size vượt thừa phạm vi chiều rộng lớn phần content của phần tử thì thành phần sẽ tự động hóa tạo ra thanh scroll ngang. |
| scroll | - thành phần luôn luôn luôn tạo ra một chiếc thanh scroll ngang (mặc cho nội dung của nó có size vượt vượt phạm vi chiều rộng phần content của nó xuất xắc không) |
| initial | - thực hiện giá trị mang định của nó. (mặc định thì ở trong tính overflow-x có mức giá trị là visible) |
| inherit |
- lưu lại ý: Cách thực hiện thuộc tính overflow-y cũng giống với nằm trong tính overflow-x. Tuy nhiên, thay vì chưng xử lý phần nội dung bị tràn ra phía bên ngoài theo chiều ngang thì nằm trong tính overflow-y sẽ xử lý phần văn bản bị tràn ra phía bên ngoài theo chiều dọc.