css & multi line words & ellipsis

css & multi line words & ellipsis

bug

.news-card-content-title {
    width: 100%;
    height: 0.8rem;
    line-height: 0.4rem;
    display: block;
    overflow: hidden;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
    max-width: calc(4.8rem);
}

bug

.news-card-content-title {
    width: 100%;
    height: 0.8rem;
    line-height: 0.4rem;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(4.8rem);
}

wanted

solution

css text overflow ellipsis multi-line

https://codepen.io/xgqfrms/pen/qeZpEd

See the Pen Pure CSS multiline text with ellipsis by xgqfrms
(@xgqfrms) on CodePen.

.news-card-content-title {
    width: 100%;
    height: 0.8rem;
    line-height: 0.4rem;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: calc(4.8rem);
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
}

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---