Rút gọn tiêu đề thành 2 hàng bằng CSS

5/5 – (1641 bình chọn)

Thông thường các sản phẩm ở Việt Nam có tên khá dài, và không đều nên lên web rất xấu. Đơn giản là hôm nay mình chia sẻ đoạn css để rút gọn tiêu đề lại cho đều với nhau. Css như sau:

p.name.product-title a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 0;
}

 

Trong đó p.name.product-title a là class của tiêu đề sản phẩm trên web của bạn, các bạn nhớ thay cho đúng (cái demo là của theme Flatsome). -webkit-line-clamp: 2; là số dòng các bạn muốn cắt, nếu chỉ muốn cắt thànhh 1 dòng thì thay bằng số 1.

Chúc các bạn thành công!

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *