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

标签：div   space   lamp   wal   parent   node   text   func   ica   

    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 = "查看全部";
    }
}

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

标签：div   space   lamp   wal   parent   node   text   func   ica   

原文地址：https://www.cnblogs.com/Yancyzheng/p/10773411.html