• Thế giới của tôi
  • Công nghệ
  • Nghệ thuật
  • Giải trí
  • Chế tạo Diy
  • Video
  • Phòng trưng bày
  • Quảng cáo
Thế giới của tôi
  • Trang chủ
  • Công nghệ

    Bán hàng online hiệu quả qua Instagram

    Hướng dẫn trỏ tên miền Namesilo về VPS Vultr

    Trang web tạo mật khẩu ngẫu nhiên cực hay

    Hướng dẫn bật nén Gzip trong Nginx cực đơn giản

    Cấu hình plugin Wp Rocket hay

    Hướng dẫn trỏ tên miền Name về VPS Vultr

    Tên miền

    Bật tính năng của ảnh trong wordpress 3.0

    Tầm quan trọng hình ảnh sản phẩm trong bán hàng online

  • Nghệ thuật
  • Giải trí
  • Chế tạo Diy
  • Video
  • Phòng trưng bày
No Result
View All Result
  • Trang chủ
  • Công nghệ

    Bán hàng online hiệu quả qua Instagram

    Hướng dẫn trỏ tên miền Namesilo về VPS Vultr

    Trang web tạo mật khẩu ngẫu nhiên cực hay

    Hướng dẫn bật nén Gzip trong Nginx cực đơn giản

    Cấu hình plugin Wp Rocket hay

    Hướng dẫn trỏ tên miền Name về VPS Vultr

    Tên miền

    Bật tính năng của ảnh trong wordpress 3.0

    Tầm quan trọng hình ảnh sản phẩm trong bán hàng online

  • Nghệ thuật
  • Giải trí
  • Chế tạo Diy
  • Video
  • Phòng trưng bày
No Result
View All Result
Thế Giới Của Tôi
No Result
View All Result
Home Wordpress

Thu gọn tiêu đề bài viết bằng CSS

Mai Linh by Mai Linh
22 Tháng Ba, 2021
2 min read
0
Nut Mau Dep Ngoinhaweb

Nut Mau Dep Ngoinhaweb

Share on FacebookShare on Twitter

Xem nhanh tại đây.

  1. Thu gọn tiêu đề bài viết bằng CSS.

Các bạn có thể áp dụng thủ thuật này ở những chỗ như: tiêu đề bài viết trên trang chủ, recent post (bài viết gần đây), popular post (bài đăng phổ biến), recent comment (bình luận gần đây),…
Tác dụng hay ích lợi của nó cũng tùy thuộc vào quan điểm thẩm mỹ của bạn, cũng có thể bạn thích hoặc không nhưng đối với mình thì nó có lợi như sau:

  1. Thu gọn tiêu đề bài viết bằng CSS.

    Cách thu gọn tiêu đề bài viết trên WordPress bằng CSS
    Như ở trên mình có nói là nó dành cho tất cả các loại web chứ không riêng gì WordPress, ở đây mình áp dụng trên WordPress nên sẽ làm như sau:Bước 1: Tìm ID hoặc class của nhóm tiêu đề bạn muốn thu gọn thì mình tìm đến class:
    1
    .widget-category-posts .small-post .entry-title

    Bước 2: Thêm vào bên dưới nó đoạn CSS sau (đã bao gồm class ở trên luôn) là tiêu đề nó được rút gọn rồi đấy:
    1
    2
    3
    4
    5
    6
    7
    .widget-category-posts .small-post .entry-title {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    }

    Trong đó, cái dòng cuối cùng -webkit-line-clamp: 2; thì số 2 tức là số dòng tối đa mà tiêu đề sẽ được rút gọn.

    Tuy nhiên mình cũng chỉ áp dụng cái này trong một số kích thước màn hình thôi chứ không áp dụng hết. Phần tiêu đề bài viết này mình áp dụng cho recent comment là chính vì tên của người bình luận nó vô chừng, đủ kiểu dài ngắn khác nhau nên phải dùng nó để gọt lại bớt cho gọn.

Cắt gọn những tiêu đề quá dài so với mặt bằng chung để cái danh sách nó được đều và chuyên nghiệp hơn. Tiêu đề bị khuất mất một đoạn cũng có thể gây tò mò với người đọc, họ cũng có thể click vào xem xem rốt cuộc cái bài đó nó có tiêu đề gì :v

Previous Post

Nút màu đẹp tỏa sáng

Next Post

chèn font awesome

Mai Linh

Mai Linh

chuyên wordpress, function, php, code, ...

Next Post

Phần mềm CCleaner Pro Full hướng dẫn cài đặt nhanh đơn giản

No Result
View All Result

Bài viết mới

  • Một mẫu slider đẹp
  • Cách tạo vị trí menu wordpress
  • Khai báo custom post type trong wordpress
  • Sửa lỗi Because app requires SDK version >=2.15.1 <3.0.0 version solving failed
  • Cách đặt nhân vật tiếng trung phồn thể cho game Jx3 Quốc tế

Phản hồi gần đây

    Chuyên mục

    • Bảo mật website
    • Bẻ khóa theme plugin
    • Cắt giấy
    • Chụp ảnh
    • Chụp ảnh sản phẩm
    • Code tiện ích cho website
    • Code trang trí mở rộng
    • Công cụ Tools
    • Công nghệ
    • CSS
    • Digital Marketing
    • Function
    • Game Jx2
    • Game Jx3
    • Game Online
    • Gian hàng online
    • Hosting
    • HTML
    • Instagram
    • Kirigami
    • Kirigami 0 độ
    • Kirigami 180 độ
    • Kirigami 360 độ
    • Kirigami 90 độ
    • Mã độc hại website
    • Marketing Online
    • Máy chủ ảo VPS
    • Origami
    • Paper Craft
    • Phần mềm máy tính cơ bản
    • Php
    • Quilling
    • SEO
    • SEO Offpage
    • SEO Onpage
    • Share theme plugin
    • Shopee
    • Sửa ảnh
    • Tăng doanh thu bán hàng
    • Tên miền
    • Thông tin thế giới của tôi
    • Tối ưu tốc độ web
    • Windows
    • Wordpress

    Recent News

    Một mẫu slider đẹp

    29 Tháng Sáu, 2023

    Cách tạo vị trí menu wordpress

    20 Tháng Tư, 2023
    • Giới thiệu
    • Quảng cáo
    • Bảo mật
    • Liên hệ

    © 2019 Thế Giới Của Tôi - Thiết kế & xây dựng bởi Ngôi Nhà Web.vn.

    No Result
    View All Result
    • Thế giới của tôi
    • Công nghệ
    • Nghệ thuật
    • Giải trí
    • Chế tạo Diy
    • Video
    • Phòng trưng bày
    • Quảng cáo

    © 2019 Thế Giới Của Tôi - Thiết kế & xây dựng bởi Ngôi Nhà Web.vn.