Thứ Hai, 18 tháng 11, 2019

Dùng CSS để cắt chuỗi trên 1 dòng và nhiều dòng

  Gia Hân       Thứ Hai, 18 tháng 11, 2019
Dùng CSS để cắt chuỗi trên 1 dòng và nhiều dòng


1. Cắt chuỗi trên 1 dòng ta dùng CSS như sau

.p-text {
    width: 600px;  // tùy chọn
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Giải thích ý nghĩa CSS từng lệnh:

white-space: nowrap: Ngăn không cho đoạn văn bản xuống dòng chỉ 1 dòng duy nhất
overflow: hidden: Ẩn đoạn text bị thừa nằm trên một dòng
text-overflow: ellipsis: Thay thế đoạn text bị ẩn bằng dấu ...

2. Cắt chuỗi trên nhiều dòng dùng CSS như sau:

.p-text {
    width: 600px;  // tùy chọn
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;  // tùy chọn
    -webkit-line-clamp: 3;
    height: 75px;  // tùy chọn
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

Giải thích ý nghĩa CSS từng lệnh:

line-height: 35px: Cài đặt line-height chiều cao cho đoạn văn bản
-webkit-line-clamp:3: Số dòng text hiển thị ở đây là 3 dòng
height: 85px: Cài đặt chiều cao cho đoạn văn bản height = line-height * line-clamp 

Chúc bạn thành công!
logoblog

Thanks for reading Dùng CSS để cắt chuỗi trên 1 dòng và nhiều dòng

Previous
« Prev Post

Không có nhận xét nào:

Đăng nhận xét