Tìm hiểu về thuộc tính overflow trong CSS
Overflow là một thuộc tính mà chúng ta thường xuyên gặp trong CSS. Chức năng của nó là làm cho thẻ sử dụng nó ẩn/hiện hoặc xuất hiện thanh cuộn khi đoạn nội dung nằm trong nó (văn bản/hình ảnh) lấn ra vượt quá chiều cao hoặc chiều rộng mà chúng ta quy định. Hôm nay qua bài viết này mình xin giới thiệu các bạn thuộc tính này.
Hiện tại thì thuộc tính overflow có một vài lựa chọn như sau:
Bây giờ để các bạn hiểu rõ mỗi lựa chọn cho thuộc tính này, mình sẽ tạo ra một đối tượng chứa một đoạn văn bản tương đối:
background-color : màu nền
border : đường viền
padding : khoảng cách tự rìa đối tượng đến nội dung văn bản
width : chiều rộng
height : chiều cao
overflow : thuộc tính chúng ta đang tìm hiểu
Công việc tiếp theo mình sẽ tiến hành thử nghiệm trực tiếp các lựa chọn của thuộc tính overflow vào trong đối tượng mà chúng ta tạo.
Đối với overflow: auto
Đối với overflow: scroll
Đối với overflow: hidden
đoạn văn bản vượt qua đối tượng của chúng ta sẽ bị ẩn đi. Thuộc tính này khá hay trong một số việc mình sẽ giới thiệu ở các bài viết sắp tới.
Đối với overflow: visible
ngược lại với hidden thì visible sẽ làm cho đoạn văn bản hiện ra ngoài đối tượng, nhưng đặc biệt là kích thước của đối tượng trên vẫn sẽ như quy định, văn bản lấn ra ngoài không có bất cứ liên quan gì đến những gì ngoài nó, đoạn diễn giải này mình phải xuống dòng nhiều lần để không bị đè lên bởi đoạn chữ lấn ra ngoài.
Tới đây chắc là đủ các thông tin cần thiết về thuộc tính overflow trong CSS rồi, mong rằng đây sẽ là thông tin hữu ích cho một số người đang tìm kiếm. Bạn hãy để mắt tới chuyên mục mới CSS của mình, càng ngày sẽ càng có những thứ hấp dẫn mà bạn chưa hề biết.
Hiện tại thì thuộc tính overflow có một vài lựa chọn như sau:
- overflow:auto
- overflow:scroll
- overflow:hidden
- overflow:visible
Bây giờ để các bạn hiểu rõ mỗi lựa chọn cho thuộc tính này, mình sẽ tạo ra một đối tượng chứa một đoạn văn bản tương đối:
<div style="background-color:#FBFBFB; border:1px solid #D2D2D2; padding:10px; width:400px; height:100px; overflow:auto;">đoạn văn bản ví dụ</div>Mô tả:
background-color : màu nền
border : đường viền
padding : khoảng cách tự rìa đối tượng đến nội dung văn bản
width : chiều rộng
height : chiều cao
overflow : thuộc tính chúng ta đang tìm hiểu
Công việc tiếp theo mình sẽ tiến hành thử nghiệm trực tiếp các lựa chọn của thuộc tính overflow vào trong đối tượng mà chúng ta tạo.
Đối với overflow: auto
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
với lựa chọn này, nếu đoạn văn bản vượt quá giới hạn chiều cao quy định thì đối tự sẽ tự động xuất hiện thanh cuộn. Tại sao nó không xuất hiện thanh cuộn ngang? Đoạn văn bản nằm trong đối tượng có quy định chiều rộng thì không bao giở lấn qua chiều rộng được quy định đó. Nếu bạn thay thế đoạn văn bản bằng một hính ảnh vượt qua giới hạn chiều rộng thì sẽ xuất hiện thanh cuộn ngang.Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đối với overflow: scroll
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
với overflow: scroll không như auto, đối tượng của chúng ta luôn luôn xuất hiện thanh cuộn cho dù kích thước quy định của đối tượng và đoạn văn bản nằm trong có thế nào đi nữa.Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đối với overflow: hidden
đoạn văn bản vượt qua đối tượng của chúng ta sẽ bị ẩn đi. Thuộc tính này khá hay trong một số việc mình sẽ giới thiệu ở các bài viết sắp tới.
Đối với overflow: visible
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
Đoạn văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow, văn vản ví dụ về thuộc tính overflow.
ngược lại với hidden thì visible sẽ làm cho đoạn văn bản hiện ra ngoài đối tượng, nhưng đặc biệt là kích thước của đối tượng trên vẫn sẽ như quy định, văn bản lấn ra ngoài không có bất cứ liên quan gì đến những gì ngoài nó, đoạn diễn giải này mình phải xuống dòng nhiều lần để không bị đè lên bởi đoạn chữ lấn ra ngoài.
Tới đây chắc là đủ các thông tin cần thiết về thuộc tính overflow trong CSS rồi, mong rằng đây sẽ là thông tin hữu ích cho một số người đang tìm kiếm. Bạn hãy để mắt tới chuyên mục mới CSS của mình, càng ngày sẽ càng có những thứ hấp dẫn mà bạn chưa hề biết.
lúc 17:03 25 tháng 10, 2016
mk có 1 đoạn văn dài và ẩn đi 1 nửa. nếu muốn thêm dấu ... vào cuối đoạn thì làm ntn
lúc 10:05 27 tháng 10, 2016
Cái đó thì chắc phải xài javascript thôi bạn, bạn có thể xài luôn đoạn này. http://www.kslzone.net/2014/07/auto-readmore-khong-thumbnail-cho.html
Bạn chèn đoạn script phía trên vào website của bạn rồi dùng
<script type='text/javascript'> createSummary("toàn bộ nội dung bạn muốn ẩn");</script>