Cắt tiêu đề thành 2,3 dòng với Website/Blogspot

Cắt tiêu đề thành 2,3 dòng với Website/Blogspot
Trong quá trình xuất bản và đặt tiêu đề bài viết, không ít bài viết có tiêu đề quá dài làm mất cân đối trên Website. Hoặc đơn giản là bạn muốn Website bạn đồng bộ hơn trong gọn gàng hơn thì ta tiến hành tự động cắt tiêu đề cho ngắn lại.

Minh họa cắt tiêu đề thành 2 dòng


Thủ thuật cắt tiêu đề này chỉ sử dụng CSS có thể áp dụng cho hầu hết tất cả các website. Bây giờ chúng ta sẽ tiến hành nhé!


Bước 1: Xác định Id/class của phần tử mà bạn muốn cắt dòng

Chuột phải vào tiêu đề và chọn kiểm tra phần tử để để định được tên class/id mà bạn muốn cắt ngắn lại.

Bước 2: Chèn code CSS vào blogger

Code:
Id/class{text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2}
Thay id hoặc class thành phần mà bạn muốn cắt thành đã tìm được ở bước 1

Ý nghĩa các dòng CSS trên như sau:
  • Id/class: Là phần tử mà bạn muốn cắt
  • -webkit-line-clamp: 2: Là số dòng bạn muốn cắt, nếu quá số dòng này sẽ thể hiện bằng dấu ...
  • white-space: nowrap (dùng để ép chữ hiển thị chỉ trên 1 hàng, không xuống hàng)
  • overflow: hidden (để làm mất phần chữ bị tràn ra)
  • text-overflow: ellipsis (thêm dấu 3 chấm vào phần chữ bị mất)

Bước 3: Lưu lại

Lưu lại và kiểm tra

Lỗi trong quá trình cắt tiêu đề

1. Đoạn tiêu đề cắt còn hiện

Chỉnh sửa lại giá trị của line-height nếu bạn thấy dòng tiêu đề đã bị cắt còn xuất hiện, nếu sử dụng thêm padding thì sẽ lỗi.

2. Không hoạt động trên Firefox

Chớ trêu thay thì dòng lệnh -webkit-line-clamp: 2 lại không hoạt động trên Firefox. IE. Cho nên bạn phải thêm max-height để dòng chữ không bị dài thêm.


Chúc bạn thành công!
Xuất bản tại mục CSS3. Lưu lại liên kết này Ctrl + D
3 Nhận xét
  1. em xác định id hoặc class mà sai hay sao á anh check em với
    https://www.hungngao.xyz/index.php

    Trả lờiXóa
  2. anh ơi em có nt ở tin nhắn chờ nhờ anh hộ trợ em với

    Trả lờiXóa