Giới hạn số dòng văn bản trong blogspot bằng CSS

Giới hạn số dòng văn bản trong blogspot bằng CSS

vu van trong / lúc November 13, 2023 ngày Monday, November 13, 2023 / 0 bình luận

Chia sẻ

Chọn hình thức muốn chia sẻ:
• Copy liên kết
• Facebook
• Google +
• Email

Hãy nhấn ĐĂNG KÍ Trọng Ren Blog để có thể nhận nhiều bài viết hay, hữu ích nhé!

Trong khi thiết kế, chỉnh sửa giao diện, viết nội dung Blog, nếu bạn muốn khống chế khu vực mà đoạn văn bản có thể được hiển thị, đơn giản bạn chỉ cần 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.

Giới hạn số dòng văn bản trong blogspot bằng CSS.

Xem code ví dụ:

.max-lines{
   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) */
}

Cách sử dụng

Khi muốn sử dụng, bạn thêm class "max-lines" cho đoạn văn bản đó. Xem Demo

Áp dụng

Bạn có thể áp dụng cách này để khống chế, 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;
}

Đây là vấn đề về mặt thẩm mỹ thường xuyên để canh chỉnh hàng chữ mà chúng ta cần sử dụng. Hy vọng sẽ giúp ích cho các bạn trong việc thiết kế.

Bạn vừa xem bài viết "

Giới hạn số dòng văn bản trong blogspot bằng CSS

"
Tác giả: vu van trong - Admin Quốc Bảo Blog
Ghi rõ nguồn www.quocbaoblogit.blogspot.com khi đăng tải lại bài viết này