Ẩn bớt nội dung và thêm dấu 3 chấm khi nội dung quá dài

Code này sẽ giúp bạn ẩn bớt nội dung text theo số dòng mà bạn muốn hiển thị, đồng thời nó cũng tạo ra thêm 3 dấu 3 chấm ở cuối text để thêm sinh động cho nội dung.

Code ẩn bớt nội dung text và thêm dấu 3 chấm

<div class="card">
<img class="opacity" title="Hình ảnh" src="https://caodem.com/wp-content/uploads/matebook-d.jpg" width="100%" />
<div class="an">
Theo như thông tin tác giả cung cấp thì Perfecty Push Notifications là một plugin với chức năng tạo thông báo đẩy lên trình duyệt tự nó lưu trữ. Bạn sẻ không cần thêm API để tích hợp với các nhà cung cấp bên ngoài, vì thường sẻ bị tính phí. Plugin sử dụng mã nguồn mở và thông tin được lưu trữ trong WordPress của bạn, do đó bạn có thể gửi Thông báo đẩy trực tiếp từ máy chủ của bạn hoàn toàn miễn phí!
</div>
</div>

Trên là đoạn HTML hiển thị nội dung gồm hình ảnh và text, nội dung chứa text được bao bọc bởi một thẻ mà bạn chỉ định, có thể là div, p..

<style>
/* CSS thẻ bao bọc nội dung gồm hình ảnh và text */
.card{
padding:20px;
border:2px solid #ccc;
background:#f1f1f1;
}
/* CSS thẻ bao đoạn text cần ẩn */
.an {
display: block;
display: -webkit-box;
height: 16px*1.3*3;
font-size: 16px;
line-height: 1.3;
-webkit-line-clamp: 3; /* số dòng hiển thị */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-top:10px;
}
</style>

Bên trên là CSS ẩn bớt text và thêm dấu 3 chấm ở cuối, mình đã chú thích chi tiết để bạn có thể thay đổi theo sở thích.