30.6.22 |
0
nhận xét
|
lượt xem
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
- Dòng thứ 1
- Dòng thứ 2
- Dòng thứ 3
- Dòng thứ 4
- Dòng thứ 5
- Dòng thứ 6
- Dòng thứ 7
- Dòng thứ 8
- Dòng thứ 9
- Dòng thứ 10
- Dòng thứ 11
- 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 sauol { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 5; height: 70px; display: -webkit-box; -webkit-box-orient: vertical; }Như vậy ta sẽ được
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ị.
- Dòng thứ 1
- Dòng thứ 2
- Dòng thứ 3
- Dòng thứ 4
- Dòng thứ 5
- Dòng thứ 6
- Dòng thứ 7
- Dòng thứ 8
- Dòng thứ 9
- Dòng thứ 10
- Dòng thứ 11
- Dòng thứ 12
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
Hoặc thấp quá
- Dòng thứ 1
- Dòng thứ 2
- Dòng thứ 3
- Dòng thứ 4
- Dòng thứ 5
- Dòng thứ 6
- Dòng thứ 7
- Dòng thứ 8
- Dòng thứ 9
- Dòng thứ 10
- Dòng thứ 11
- 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
- Dòng thứ 1
- Dòng thứ 2
- Dòng thứ 3
- Dòng thứ 4
- Dòng thứ 5
- Dòng thứ 6
- Dòng thứ 7
- Dòng thứ 8
- Dòng thứ 9
- Dòng thứ 10
- Dòng thứ 11
- Dòng thứ 12
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