Tùy chỉnh và giới hạn số dòng văn bản được hiển thị trong blogger bằng CSS
Chào các bạn, trong khi thiết kế cũng như chỉnh sửa template rất nhiều bạn gặp phải lỗi văn bản bị tràn ra khỏi lề hoặc là nhìn rất rối mắt.
Trong bài này mình sẽ hướng dẫn các bạn cách giới hạn số dòng mà đoạn văn bản có thể hiển thị bằng cách sử dụng CSS
HƯỚNG DẪN CÁCH LÀM
Khi bạn muốn tùy chỉnh giới hạn số dòng văn bản cho một đoạn nào đó, các bạn chỉ cần thêm đoạn css sau vào các thẻ class hoặc id của đoạn văn bản đó.
.class(hoặc #id){
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: N; /*số dòng muốn hiện */
font-size: F; /*cỡ chữ, đơn vị px */
line-height: X; /* khoảng cách giữa các dòng, đơn vị em*/
max-height: F*N*X; /* chiều cao tối đa đoạn văn bản = (cỡ chữ) x (số dòng) x (chiều cao) */
}
Ví dụ bạn có thể áp dụng để giới hạn số dòng của tiêu đề bài viết trên trang chủ để không làm vỡ Layout, bạn chỉ cần chỉnh sửa CSS tương tự bên dưới là được:
h2.post-title, h2.post-title a {
font-size: 20px;
line-height: 1.3em;
color: #3b5998!important;
margin: 0 0 5px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
max-height: 52px;
}