Like Page để cập nhật tin mới ngay trên facebook nhé

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.
Tuỳ chỉnh và giới hạn dòng chữ tiêu đề cho blogspot/blogger
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.
Tuỳ chỉnh và giới hạn dòng chữ tiêu đề cho blogspot/blogger
Đ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!

5 nhận xét:

  1. Change liên kết bomkhung.info => hungcoder.com hộ mình với nhé bạn :) tks

    Trả lờiXóa
  2. Bạn ơi cho mình hỏi m muốn trỏ domain về cloudflare thì namesever để trỏ về nó có dạng gì bạn nhỉ ? txt hay ns hay mx or cname mình tìm trên google mà không thấy ( cái ns nó không đc vì nó bảo lỗi gì đó ) domain m nằm ở tenten nhé

    Trả lờiXóa
  3. Mình chưa hiểu cho lắm

    Trả lờiXóa

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói