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

- [tintuc]
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!
[/tintuc]

3 Nhận xét

➔ Gửi kèm hình ảnh trên bài viết để được hỗ trợ tốt nhất.
➔ Để bình luận kèm hình ảnh, bạn vào trang Upload Ảnh, kéo thả để Upload hình ảnh lên.
➔ Bạn dán URL link hình ảnh vào khung bình luận và ấn Xuất bản, ảnh sẽ được tự động tải lên.
➔ Không spam trong khung bình luận, hạn chế viết tắt.
➔ Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin

Mới hơn Cũ hơn

POST ADS1

POST ADS 2