Tuỳ chỉnh và giới hạn dòng chữ tiêu đề cho blogspot bằng CSS

Trong bài viết này mình sẽ hướng dẫn các bạn một thủ thuật nhỏ với CSS, cách này có thể áp dụng được trên nhiều các thành phần, không riêng tiêu đề của blogspot.

Tuỳ chỉnh và giới hạn dòng chữ tiêu đề cho blogspot/blogger

Ưu điểm của việc cắt và tuỳ chỉnh dòng tiêu đề:

- Đầu tiên mình thấy nó rất gọn gàng với những tiêu đề khá là dài và thứ hai vị trí hiển thị rất "khiêm tốn"
- Tiếp theo đó là làm tăng sự hấp dẫn bởi tiêu đề bài viết buộc người đọc phải click vô để xem được toàn bộ tiêu đề là gì
Dưới đây là hai hình ảnh mà trước và sau khi mình tiến hành cắt tiêu đề
Hình ảnh này bạn có thể thấy khi chưa cắt sẽ thấy dòng có 3, dòng có 2 nhìn vậy cảm thấy rối và không được cân đối cho lắm.

Hình ảnh sau khi cắt tiêu đề nhìn rất cân đối và hợp lý hơn, nhìn cũng rất đẹp mắt.

Đi vào vấn đề mình sau đây mình sẽ hướng dẫn các bạn thực hiện cách cắt tiêu đề:

Hướng dẫn cách làm:

Tuỳ phụ thuộc vào từng mẫu mà bạn có thể xác định được chính xác được thuộc tính của tiêu đề, tên class hoặc id của tiêu đề, sau đó sử dụng đoạn CSS sau:

.ten-class(hoặc #id){
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

Bạn để ý dòng màu đỏ: đây chính là mấu chốt để thực hiện, phía trên mình để là số 2 nghĩa là cắt thành 2 dòng, nếu bạn muốn cắt thành bao nhiêu dòng thì thay đổi giá trị tăng hoặc giảm theo ý.

Kết luận:

Trên đây mình đã chia sẻ và hướng dẫn các bạn cách cắt tiêu đề blogspot giúp việc hiển thị đơn giản và tối ưu hơn.
Tuy nhiên thủ thuật trên cũng có thể cáp dụng tại nhiều thành phần cũng như các dòng chữ khác nhé.
Chúc bạn thành công!

Download Here