- Home
- Web Development
- HTML & CSS
- Thuộc tính Overflow trong CSS
Thuộc tính Overflow trong CSS
Khi thiết kế web với HTML và CSS đôi khi chúng ta sẽ gặp phải tình trạng văn bản [text] bị tràn ra khỏi phần tử HTML để khắc phục điều này cần dùng đến thuộc tính Overflow CSS.
Mục Lục
- Overflow trong CSS là gì?
- Các thuộc tính của Overflow
Overflow trong CSS là gì?
Bạn sẽ thường gặp nhất khi tạo một khung chứa đoạn code đó là khi set chiều cao của một box mà nội dung chữ quá lớn khiến cho text vượt quá ra ngoài.
Ví dụ:
.box { height: 150px; width: 200px; border: 1px solid red; }Khi thiết kế web với HTML và CSS đôi khi chúng ta sẽ gặp phải tình trạng văn bản [text] bị tràn ra khỏi phần tử HTML để khắc phục điều này cần dùng đến thuộc tínhOverflow.
Khi chạy đoạn code với height: 150px thì văn bản hiển thị bình thường nhưng nếu đặt height: 100px thì sao? text sẽ tràn ra khỏi box.
Lúc này bạn thêm vào overflow: scroll;trong đoạn CSS xem nào!
Kết quả đã khác rồi phải không nào, lúc này nó sẽ xuất hiện một thanh trượt.
Các thuộc tính của Overflow
overflow: visible; Đây là mặc định, text tràn ra ngoài.
overflow: hidden; nội dung tràn ra sẽ bị ẩn đi.
overflow: scroll; xuất hiện thanh trượt.
overflow: auto; tự động xuất hiện thanh trượt khi cần thiết.
Lời kết: Quá đơn giản phải không nào, với bài viết về text-overflow trên đây sẽ giúp bạnthiết kế website bằng HTML và CSS cực kỳ đơn giản và dễ dàng.
Cùng chủ đề
- Cách tạo menu dọc đa cấp bằng CSS
- 8 Cách viết CSS chuẩn, dễ đọc và tối ưu
- Hiệu ứng rê chuột trong CSS
- First-child, last-child, nth-child trong CSS
- Thuộc tính Display Flex trong Css
- Hiệu ứng Animation trong CSS3
- Hiệu ứng Hover ảnh CSS3
- Thuộc tính z-index trong CSS
- Thuộc tính Line-height trong CSS
- Thuộc tính Text-Transform trong CSS
- Học CSS
- HTML & CSS
Tags: Học CSS
Bình luận! Hủy
Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *
Bình luận
Tên *
Email *
Trang web
Δ
Đọc thêm
Căn giữa trong CSS [Center Div]
Làm thế nào để căn giữa[center] một phần tử HTML hoặc hình ảnh trong CSS? Khi bạn thiết kế website các phần tử mặc định đều nằm sang bên trái. Nhưng nếu bạn biết một
Thuộc tính box-sizing trong CSS
Một thuộc tính có lẽ ít được mọi người quan tâm trong CSS đó là Box-sizing. Trước đây khi tìm hiểu về CSS thì nó không được chú ý lắm. Nhưng mãi về sau khi
Canh giữa theo chiều dọc CSS
Khi làm web bạn sẽ cần canh giữa các phần tử theo chiều ngang hoặc dọc [Vertical Centering]. Với chiều ngang thì có thể dùng Flexbox với juscontent: center hoặc margin: 0 auto hay text-align:
Thuộc tính Display trong CSS [inline block]
Một trong thuộc tính gây khó khăn cho người mới khi sử dụng CSS đó là Display. Bài viết này sẽ giúp hiểu rõ hơn về thuộc tính Display trong CSS và cách sử dụng
Hướng dẫn sử dụng Before và After trong CSS
Before After là một trong những mã CSS dùng để trang trí website mình thường hay sử dụng. Và đây cũng là Pesudo Element thông dụng được dùng để thiết kế Frontend. Bạn đã thực
Thuộc tính letter-spacing trong CSS
Letter-spacing là một thuộc tính làm việc với văn bản được sử dụng trong một vài trường hợp cần thiết. Khi dùng letter-spacing CSS sẽ làm tăng hoặc giảm khoảng cách giữa các phần tử