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

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 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

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

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á

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

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