Giới hạn số dòng css không hiển thị tốt trên safari

Quockhanh1998 · May 3, 2022, 1:14pm

Chào mn, đoạn code bên dưới của em không hiển thị tốt trên trình duyệt safari. Giờ phải sữa như thế nào ạ
Xin Cảm ơn !

        width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

library · May 4, 2022, 1:39am

Cậu có thể cho bọn tớ biết cậu kỳ vọng đoạn code này hiển thị thế nào được không?

LocNguyenXuan99 · May 4, 2022, 12:06pm

Như mình thấy -webkit-line-clamp hiển thị tốt trên safari. https://caniuse.com/?search=-webkit-line-clamp

Không biết safari của bạn version bao nhiêu. hoặc cũng có thể css của bạn bị override

Quockhanh1998 · May 4, 2022, 4:47am

version của máy hỗ trợ á a, còn bị override thì khắc phục sao ạ. Giờ rối quá sắp giao cho khách mà test vài không được

LocNguyenXuan99 · May 4, 2022, 12:06pm

Check lại bằng Inspect tool

Thử remove những đoạn ảnh hưởng VD height, display, overflow, position …

Vd trên đây là bị ảnh hưởng bởi display.
Ngoài ra cũng có thể test 1 đoạn code đơn giản chỉ apply css đó trước.
Bằng cách tạo 1 file index.html rồi chạy thử trên trình duyệt

Quockhanh1998 · May 4, 2022, 12:05pm

Xin cảm ơn ạ, cái này do version không hỗ trợ

Truong_Nguyen_Quang · May 4, 2022, 1:22pm

bạn fix cứng pixel cho line-height và max height = line-height * số dòng muốn hiển thị là được nhé
ví dụ muốn 2 dòng:

line-height: 20px; 
max-height: 40px;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;