CSS multi line text ellipsis All In One

CSS multi line text ellipsis All In One

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

.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; */
}

refs

---

---

©xgqfrms 2012-2020

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---