适配移动端的文字超出隐藏并添加省略号

Posted 2021-10-26 yancyzheng

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal ！important;
    display: -webkit-box;
    -webkit-line-clamp: 4;     /* 显示4行，为auto时不隐藏 */
    -webkit-box-orient: vertical;

• 查看全部与收起事例

<div class="notice" style="-webkit-line-clamp: 4">
    之鹿艺术培训中心是经国家教育部门批准注册的专业美术高考集训营。始终致力于做“良心教育，负责任的教育”的美术高考集训营显著的升学之鹿艺术培训中心是经国家教育部门批准注册的专业美术高考集训营。始终致力于做“良心教育，负责任的教育”的美术高考集训营显著的升学
</div>
<div class="all" id="all">
    <span class="isViewAll">展开全部</span>
</div>

.notice {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal ！important;
    display: -webkit-box;
    /* -webkit-line-clamp: 4; */
    -webkit-box-orient: vertical;
}

all.onclick = function() {
    if (+mui(".notice")[0].style["-webkit-line-clamp"] === 4) {
        mui(".notice")[0].style["-webkit-line-clamp"] = "";
        document.querySelector(".notice").parentNode.querySelector(".isViewAll").innerhtml = "收起";
    } else {
        mui(".notice")[0].style["-webkit-line-clamp"] = 4;
        document.querySelector(".notice").parentNode.querySelector(".isViewAll").innerHTML = "查看全部";
    }
}