.text-col4 ul { display: flex; flex-wrap: wrap; gap: 0.3rem 0.35rem; justify-content: center; } .text-col4 ul li { width: 3.52rem; height: 1.4rem; padding: 0.3rem; position: relative; } .text-col4 ul li P { max-height: 0.8rem; font-size: 0.2rem; color: #333; line-height: 0.4rem; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: absolute; top: 50%; transform: translateY(-50%); width: calc(100% - 0.6rem); left: 0.3rem; } @media screen and (max-width: 750px) { .text-col4 ul { width: 6.8rem; margin: 0 auto; gap: 0.25rem; } .text-col4 ul li { width: 100%; height: auto; padding: 0.32rem; } .text-col4 ul li p { width: 100%; position: initial; display: block; overflow: initial; transform: initial; text-overflow: initial; -webkit-line-clamp: initial; -webkit-box-orient: initial; max-height: initial; text-align: center; font-size: 0.28rem; line-height: 0.4rem; color: #222; } .text-col4 .mp-see-more { margin-top: 0.15rem; text-align: center; display: none; } .text-col4 .mp-see-more span { font-size: 0.4rem; color: #222; display: block; transition: all 0.3s; } .text-col4 .mp-see-more span.active { transform: rotate(180deg); } }