Giới hạn số dòng văn bản được hiển thị trong blogspot bằng CSS

Giới hạn số dòng văn bản được hiển thị trong blogspot bằng CSS

Giới hạn số dòng văn bản được hiển thị trong blogspot bằng CSS đơn giản

    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.

    Niemstyle | Giới hạn số dòng văn bản được hiển thị 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 đó, có thể 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ài viết thuộc quyền quản lý bởi: Trucnt
    Nội dung chính