跳到主要内容

超出检测

2023年03月30日
柏拉文
越努力，越幸运

一、Css 通过伪元素超出自动隐藏​

<style>
    .text {
        width: 200px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    .text::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background: red;
    }
    .closing-tag {
        position: absolute;
        bottom: 0;
        right: -8px;
    }
</style>
<div class="text">
      来自课程《
      佛挡杀发的酸辣发的酸辣粉第三方发的矢量库父节点
      》
    <span class="closing-tag">》</span>
</div>

二、JS 比较 scrollHeight 和 clientHeight​

<div class="text">
    来自课程《
    佛挡杀发的酸辣方法论第三方扣篮大赛发的矢量库非建档立卡发的酸辣粉第三课浪费
    》
</div>
<script>
    const text = document.querySelector(".text");
    if(text.scrollHeight > text.clientHeight){
        console.log("文本内容超出");
    }
</script>