.news { margin: 10px 0 80px 0; } .news>li { margin: 30px 0 0 0; cursor: pointer; display: flex; } .news-img { width: 144px; height: 104px; object-fit: cover; margin: 0 20px 0 0; overflow: hidden; } .news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s; } .news>li:hover .news-img img { transform: scale(1.05); } .text-box { border-bottom: 1px solid #E6E8EB; flex: 1; } .text-box .tit { line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .news>li:hover .text-box .tit { color: #00A1EC; } .text-box .desc { flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-height: 1.8; margin-top: 18px; padding-right: 20px; } .text-box .time { line-height: 1.8; margin-top: 18px; } @media (max-width:1199.98px) { .text-box .d-xl-flex { display: flex; } .text-box .time { /* margin-top: 0; */ } } @media (max-width:899.98px) { .news { margin: 20px 0 20px 0; } .news>li { margin: 10px 0 0 0; } .news-img { width: 104px; height: 74px; margin: 0 12px 8px 0; } .text-box { /* padding-bottom: 5px; */ } .text-box .tit { font-size: 15px; position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* .text-box .tit:after { content: ""; position: absolute; bottom: 0; right: 0; padding-right: 80px; padding-left: 4px; background: linear-gradient(to right, transparent, #fff 0%); } */ .text-box .d-xl-flex { display: block; } .text-box .desc { display: none; } .text-box .time { margin-top: 7px; } }