0 bình luận · lượt xem

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

F12, đề xuất định được phần tử mà bạn muốn cắt ngắn lại

Bước 2: Chèn code CSS trong phần tử đó

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 dòng

Ý nghĩa các dòng CSS:
  • 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 line-height nếu bạn thấy dòng tiêu đề đã bị cắt còn xuất hiện

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





Có thể bạn thích

Không có nhận xét nào:

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!