Cắt list danh sách dài với CSS

30.6.22 | 0 nhận xét | lượt xem
Nội Dung Chính [Ẩn] [Hiển thị]
    Lướt Facebook có bạn hỏi đại ý như sau, có 1 list danh sách và chỉ muốn hiển thị 3 hoặc 4 dòng đầu tiên thôi.
    Và bài viết này mình sẽ hướng dẫn để anh em có thể làm được việc này, và đơn giản chỉ sử dụng CSS

    Ví dụ về list

    Bạn có đoạn code sau
    <ol>
    <li>Dòng thứ 1</li>
    <li>Dòng thứ 2</li>
    <li>Dòng thứ 3</li>
    <li>Dòng thứ 4</li>
    <li>Dòng thứ 5</li>
    <li>Dòng thứ 6</li>
    <li>Dòng thứ 7</li>
    <li>Dòng thứ 8</li>
    <li>Dòng thứ 9</li>
    <li>Dòng thứ 10</li>
    <li>Dòng thứ 11</li>
    <li>Dòng thứ 12</li>
    </ol>
    
    Ta sẽ được nội dung hiển thị như sau
    1. Dòng thứ 1
    2. Dòng thứ 2
    3. Dòng thứ 3
    4. Dòng thứ 4
    5. Dòng thứ 5
    6. Dòng thứ 6
    7. Dòng thứ 7
    8. Dòng thứ 8
    9. Dòng thứ 9
    10. Dòng thứ 10
    11. Dòng thứ 11
    12. Dòng thứ 12

    Hướng dẫn giới hạn dòng hiển thị bằng CSS

    Để giới hạn số dòng muốn hiển thị các bạn áp dụng CSS sau
    ol {
    	overflow: hidden;
    	text-overflow: ellipsis;
    	-webkit-line-clamp: 5;
    	height: 70px;
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    }
    
    Như vậy ta sẽ được
    1. Dòng thứ 1
    2. Dòng thứ 2
    3. Dòng thứ 3
    4. Dòng thứ 4
    5. Dòng thứ 5
    6. Dòng thứ 6
    7. Dòng thứ 7
    8. Dòng thứ 8
    9. Dòng thứ 9
    10. Dòng thứ 10
    11. Dòng thứ 11
    12. Dòng thứ 12
    Tất nhiên nếu thêm đoạn CSS trên nó sẽ áp dụng cho toàn bộ thẻ ol có trên website của bạn. Vì thế trước đó bạn nên thêm class và đặt tên riêng cho những danh sách muốn giới hạn số dòng hiển thị.

    Lưu ý

    Trong đoạn CSS trên bạn cần quan tâm đến những thông số sau
    • -webkit-line-clamp:5 - Số dòng text hiển thị và sau đó sẽ là dấu ...
    • height: 70px - Chiều cao của ol, bạn phải chỉnh chiều cao sao cho phù hợp với số dòng muốn hiển thị, nếu giá trị cao hoặc thấp quá sẽ xảy ra hiện tượng như sau
    Cao quá
    1. Dòng thứ 1
    2. Dòng thứ 2
    3. Dòng thứ 3
    4. Dòng thứ 4
    5. Dòng thứ 5
    6. Dòng thứ 6
    7. Dòng thứ 7
    8. Dòng thứ 8
    9. Dòng thứ 9
    10. Dòng thứ 10
    11. Dòng thứ 11
    12. Dòng thứ 12
    Hoặc thấp quá
    1. Dòng thứ 1
    2. Dòng thứ 2
    3. Dòng thứ 3
    4. Dòng thứ 4
    5. Dòng thứ 5
    6. Dòng thứ 6
    7. Dòng thứ 7
    8. Dòng thứ 8
    9. Dòng thứ 9
    10. Dòng thứ 10
    11. Dòng thứ 11
    12. Dòng thứ 12
    Vậy là mình hướng dẫn xong rồi, anh em không hiểu cứ để lại comment rảnh mình sẽ hỗ trợ :D
    Bạn đang xem bài viết "Cắt list danh sách dài với CSS" tại chuyên mục: CSS , HTML

      Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

      Chèn code: [pre]Code đã mã hóa [/pre]

      Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

      Chèn link: Click để chèn link