Cắt chuỗi đoạn văn bản với CSS

Cắt chuỗi đoạn văn bản trong CSS là một kỹ thuật hữu ích, giúp quản lý hiển thị văn bản trên các thiết bị hiển thị có không gian giới hạn. Trong bài viết này, chúng ta sẽ khám phá các phương pháp khác nhau để cắt chuỗi văn bản sử dụng CSS, bao gồm cả cắt chuỗi trên một dòng và nhiều dòng, cùng với các ví dụ cụ thể.

Cắt Chuỗi Đoạn Văn Bản Trên Một Dòng

Thuộc Tính text-overflow

Thuộc tính text-overflow trong CSS cho phép bạn xử lý văn bản bị tràn ra ngoài phần tử chứa nó. Các giá trị phổ biến nhất là clip và ellipsis.

• Clip: Cắt bớt đoạn văn bản bị tràn ra ngoài mà không thêm bất kỳ ký tự nào.
• Ellipsis: Thêm ba dấu chấm (...) vào cuối văn bản nếu nó bị tràn ra ngoài.

Ví dụ:

p {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Trong ví dụ trên, white-space: nowrap ngăn không cho văn bản xuống dòng, overflow: hidden ẩn bất kỳ nội dung nào bị tràn ra ngoài chiều rộng đã định, và text-overflow: ellipsis thêm dấu ellipsis vào cuối

Cắt Chuỗi Đoạn Văn Bản Trên Nhiều Dòng

Sử Dụng -webkit-line-clamp

Để cắt chuỗi trên nhiều dòng, bạn có thể sử dụng thuộc tính -webkit-line-clamp trong CSS. Thuộc tính này chỉ hoạt động trên các trình duyệt dựa trên WebKit/Blink như Chrome, Safari và Opera.

Ví dụ:

p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

Trong ví dụ này, -webkit-box-orient: vertical thiết lập hướng của box là dọc, -webkit-line-clamp: 3 giới hạn số dòng hiển thị là 3, và overflow: hidden ẩn các dòng còn lại

Cách Khác Để Cắt Chuỗi Văn Bản

Sử Dụng Pseudo-Element :after

Một cách khác để cắt chuỗi văn bản là sử dụng pseudo-element :after để tạo ra hiệu ứng gradient ở cuối đoạn văn bản, che đi phần văn bản bị cắt.

Ví dụ:

p {
    position: relative;
    line-height: 1.2em;
    height: 3.6em; /* 3 lines */
    overflow: hidden;
}

p:after {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    height: 1.2em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Trong ví dụ này, :after pseudo-element tạo một gradient mờ dần từ trái sang phải, che đi phần cuối của đoạn văn bản

Kết Luận

Cắt chuỗi đoạn văn bản với CSS là một kỹ thuật quan trọng trong thiết kế web hiện đại, giúp tối ưu hóa không gian hiển thị và cải thiện trải nghiệm người dùng. Tùy vào nhu cầu cụ thể của dự án, bạn có thể lựa chọn phương pháp phù hợp để áp dụng. Hy vọng qua bài viết này, bạn đã có thêm nhiều kiến thức bổ ích để áp dụng vào các dự án của mình.