内容溢出省略号显示, 点击展开、收起

最新推荐文章于 2023-09-28 18:50:13 发布

蓝色的simon

最新推荐文章于 2023-09-28 18:50:13 发布

阅读量924

点赞数

分类专栏：前端文章标签： javascript html 前端 css

本文链接：https://blog.csdn.net/qq_45135600/article/details/127279022

版权

前端专栏收录该内容

4 篇文章

订阅专栏

对于过长文本，结尾显示省略号，点击按钮展开和收起全部内容

1.收起效果

2.展开效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容溢出省略号显示</title>
</head>
<body>
<div>
    <div id="content" style="width: 149px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">HTML  element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
Paragraphs are block-level elements , and notably will automatically close if another block-level element is parsed before the closing</div>
    <span id="openBtn" style="color: dodgerblue">展开</span>
    </div>
<script>
    //定义函数 TT 根据元素id获得页面元素,提高效率
    function TT(id){
        return document.getElementById(id);
    }
    // 立即执行函数，判断文本长度是否过长
    (function(){
        var conText = TT('content').innerText
        if(conText.length >= 10){
            TT('content').style.cssText = "width: 149px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
        }
    })()
    //点击事件，控制内容显示、收起
    TT('openBtn').onclick=function(){
        let text = TT('openBtn').innerText;
        if(text == '展开'){
            TT('content').style.cssText = "";
            TT('openBtn').innerHTML = '收起'
        }
        if(text == '收起'){
            TT('content').style.cssText = "width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
            TT('openBtn').innerHTML = '展开'
        }
    }
</script>
</body>
</html>