clamp-文本溢出隐藏

最新推荐文章于 2024-03-14 11:54:07 发布

gaojianqiao1234

最新推荐文章于 2024-03-14 11:54:07 发布

阅读量187

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/gaojianqiao1234/article/details/114801923

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.下载地址
https://github.com/josephschmitt/Clamp.js

2.示例

#overflowHidden{
    background-color: yellowgreen;
    width: 20%;
}
.overflow{
    background-color: rgb(205, 50, 50);
    width: 20%;
}

    <div class="overflow">
        一段文字，一段文字，一段文字，一段文字，一段文字，一段文字，一段文字，一段文字。
    </div>
    
    <div id="overflowHidden" >
        一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字，一段长长的文字。
    </div>
    
    <div class="overflow">
        一段文字，一段文字，一段文字，一段文字，一段文字，一段文字，一段文字，一段文字。一段文字，一段文字，一段文字，一段文字。
    </div>

引入文件

<script src=".\Clamp.js-master\Clamp.js"></script>

function a(){
    //id获取节点
    var titles = document.getElementById("overflowHidden");
    $clamp(titles, {clamp: 3});
    //class获取节点
    var titles1 = document.getElementsByClassName("overflow");
    for (var i = 0; i < titles1.length; i++){
	    $clamp(titles1[i], {clamp: 1});
	}
}
a()