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!
anh ơi em có nt ở tin nhắn chờ nhờ anh hộ trợ em với