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

#Thủ Thuật #Windows #Blogger #Facebook

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

Share:
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;
}

Lời Kết 

Trên đây mình đã hướng dẫn các bạn cách 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, cụ thể hơn là áp dụng cho tiêu đề bài viết.
Hi vọng với thủ thuật này sẽ giúp ích các bạn trong việc phát triển website.
Chúc các bạn thành công!
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.