Hướng dẫn cân bằng tiêu đề với CSS Line Clamping

Thủ thuật WordPress
1

Trong thiết kế web, việc hiển thị tiêu đề dài một cách gọn gàng và thẩm mỹ là một thách thức phổ biến. Trong bài viết này, chúng ta sẽ học cách sử dụng CSS để giới hạn số dòng hiển thị của tiêu đề, đồng thời cắt ngắn phần văn bản thừa bằng dấu ba chấm (ellipsis). Cách này giúp giữ giao diện nhất quán và tránh việc bố cục bị phá vỡ bởi các tiêu đề quá dài.

Mã CSS Mẫu

Dưới đây là đoạn mã CSS giúp thực hiện tính năng cân bằng tiêu đề:

/* Cân bằng tiêu đề */
.box h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 3em;
}

Giải thích Mã CSS

  1. overflow: hidden;
    Thuộc tính này ẩn phần nội dung vượt quá không gian đã được xác định.

  2. text-overflow: ellipsis;
    Khi nội dung bị cắt, dấu ba chấm (ellipsis) sẽ xuất hiện để thay thế phần văn bản thừa.

  3. display: -webkit-box;
    Sử dụng -webkit-box như một giải pháp để tạo hộp linh hoạt trong trình duyệt WebKit (Chrome, Safari). Điều này cho phép kiểm soát việc hiển thị văn bản theo dòng.

  4. -webkit-box-orient: vertical;
    Thuộc tính này định hướng cho -webkit-box hiển thị các phần tử theo chiều dọc.

  5. -webkit-line-clamp: 2;
    Đây là phần quan trọng nhất, nó giới hạn số dòng hiển thị là 2. Bạn có thể điều chỉnh giá trị này để thay đổi số dòng.

  6. height: 3em;
    Để đảm bảo tiêu đề được cắt đúng số dòng mong muốn, chiều cao cần được tính toán dựa trên chiều cao của một dòng. Ở đây, với 2 dòng và kích thước font mặc định là 1.5em, tổng chiều cao là 3em.

Cách Sử Dụng

Bạn có thể áp dụng đoạn mã CSS này cho bất kỳ tiêu đề hoặc văn bản nào trong thẻ HTML. Ví dụ:

<div class="box">
    <h5>Tiêu đề này quá dài để hiển thị trên một dòng duy nhất, nhưng với CSS line clamping, bạn có thể giới hạn số dòng.</h5>
</div>

Tương Thích Trình Duyệt

  • Giải pháp này chủ yếu hoạt động tốt trên các trình duyệt hỗ trợ WebKit (Chrome, Safari, Edge).
  • Trên một số trình duyệt cũ hoặc không hỗ trợ WebKit, bạn có thể cần các giải pháp thay thế.

Kết Luận

Việc giới hạn số dòng cho tiêu đề với CSS line clamping là một cách tiếp cận gọn nhẹ, dễ triển khai mà không cần đến JavaScript phức tạp. Điều này giúp cải thiện trải nghiệm người dùng và giữ giao diện đồng bộ trên toàn bộ website của bạn.