文字过长时隐藏超过部分，并段尾显示展开按钮

最近工作中有小弟问了我一个很简单的问题（如题），我以为网上肯定会有解决办法就叫她去问百度，没想到她查了半天也没弄出个所以然。我也查了一下，各种帖子7788都不是很完整。只好手写了html给她。
记录一下希望能帮到需要的新人。

先放上效果图

上代码

<!DOCTYPE html>
<html id="father" lang="en">

<head>

</head>

<body>
<div style="width: 500px">
    <div style="text-align: center">测试</div>
    <div class="top-prove">为了证明楼下的那货不会对我造成影响</div>
    <div class="content-box">
        <span id="text" class="text">
          7月20日，南京市通报，禄口国际机场工作人员定期核酸检测样品中，有9例检测结果呈阳性。截至27日24时，南京市新冠肺炎感染者增至155例。此外，安徽、辽宁、广东、四川等多省均报告新冠肺炎南京关联感染者，多为途经禄口机场的旅客。
        </span>
        <button id="moreBtn" onClick="showMore()" style="display: none">展开</button>
        <button id="lessBtn" onClick="showLess()" style="display: none">收起</button>
    </div>
    <div class="bottom-prove">为了证明楼上的那货不会对我造成影响</div>
    <div class="change-buttom">
        <div class="long" onClick="tryLong()">点这试试一段比较长的文字</div>
        <div class="short" onClick="tryShort()">点这试试一段比较短的文字</div>
    </div>
</div>
</body>

<script>
    var copyText = ''
    window.onload = init()

    function init() {
        let doc = document.getElementById('text')
        console.log('判断文字长度：')
        let text = doc.innerText
        let textLength = text.length
        console.log(textLength)

        if (textLength > 60) {
            copyText = text
            doc.innerText = text.substring(0, 60) + '...'
            loadShowMore()
        } else {
            destroyShowMore()
            destroyShowLess()
        }
    }

    function showMore() {
        let doc = document.getElementById('text')
        doc.innerText = copyText
        destroyShowMore()
        loadShowLess()
    }

    function showLess() {
        let doc = document.getElementById('text')
        let text = doc.innerText
        let textLength = text.length
        if (textLength > 60) {
            copyText = text
            doc.innerText = text.substring(0, 60) + '...'
            destroyShowLess()
            loadShowMore()
        }
    }

    function loadShowMore() {
        let btn = document.getElementById('moreBtn')
        btn.style.display = 'block'
    }

    function loadShowLess() {
        let btn = document.getElementById('lessBtn')
        btn.style.display = 'block'
    }

    function destroyShowMore() {
        let btn = document.getElementById('moreBtn')
        btn.style.display = 'none'
    }

    function destroyShowLess() {
        let btn = document.getElementById('lessBtn')
        btn.style.display = 'none'
    }

    function tryLong() {
        document.getElementById('text').innerText = '7月20日，南京市通报，禄口国际机场工作人员定期核酸检测样品中，有9例检测结果呈阳性。截至27日24时，南京市新冠肺炎感染者增至155例。此外，安徽、辽宁、广东、四川等多省均报告新冠肺炎南京关联感染者，多为途经禄口机场的旅客。'
        init()
    }

    function tryShort() {
        document.getElementById('text').innerText = '7月20日，南京市通报，禄口国际机场工作人员定期核酸检测样品中，有9例检测结果呈阳性。'
        init()
    }
</script>
</html>
<style>
    .content-box {
        position: relative;
    }

    .content-box .text {
        line-height: 25px;
    }

    .content-box button {
        position: absolute;
        right: 2px;
        bottom: 2px;
    }

    .top-prove {
        height: 100px;
        width: 100%;
        background: #dddddd;
        text-align: center;
        line-height: 100px;
    }

    .bottom-prove {
        height: 100px;
        width: 100%;
        background: #dddddd;
        text-align: center;
        line-height: 100px;
    }

    .change-buttom {
        font-size: 14px;
        color: #2371be;

    }

    .long {
        text-align: center;
        height: 21px;
    }

    .short {
        text-align: center;
        height: 20px;
    }
</style>

结语

因为是手写的，所以用了原生js
如果不知道怎么放到vue或者react里面，建议再好好学学基础吧
思路放在这里，其实是很简单的东西

文字过长时隐藏超过部分，并段尾显示展开按钮

先放上效果图

上代码

结语

清醒的梦魇

引用和评论

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合