一行文字保持末尾固定文字显示，中间多余变为省略号

最新推荐文章于 2024-11-09 10:31:18 发布

svip前端小飞侠

最新推荐文章于 2024-11-09 10:31:18 发布

阅读量234

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/cao_tinggang/article/details/142358250

版权

 <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=0.5, user-scalable=no,viewport-fit=cover" />
    <title>一行文字保持末尾固定文字显示，中间多余变为省略号</title>
</head>
<style>
    .demo {

        font-size: 20px;
        margin-left: 10%;
    }
    #txtcontent {
        display: inline-block;
        word-wrap: break-word;
        word-break: break-all;
    }
</style>

<body>
    <div class="demo">
        <div id="sigle" style="position: absolute;top:-100000px">测试文字高度</div>
        <div id="txtcontent">“整个小长假期间交通秩序总体良好。9月17日下午起受车流量短时集中、下午4时至晚上12时长时间降雨等因素叠加影响，车辆剐蹭、轻微追尾等小事故增多，致当天下午起出现缓行现象。”深中通道路产管理部部长黄晓红介绍，9月15日至17日，深中通道路段共发生交通事故31宗（其中追尾事故29宗），无人员伤亡；共发生62宗车辆故障事件，其中大客车故障1宗，安全转运乘客49人。--张三</div>
    </div>
</body>
<script>
    let contentArea = document.getElementById('txtcontent');
    let contentTxt = contentArea.innerHTML; //获取内容
    let contentHeight = contentArea.clientHeight; //获取内容当前的高度

    let sigleArea = document.getElementById('sigle'); //获取当前字体下单行文字高度
    let sigleHeight = sigleArea.clientHeight;
    let needHeight = sigleHeight * 1 //设置两行文字高度

    setWordHeight()

    function setWordHeight() {
        if (contentHeight > needHeight) { //当文本高度大于设定的两行高度就执行
            let j = 0
            let beword = contentTxt.split("--")[0]
            let afword = contentTxt.split("--")[1]
            for (i = 0; needHeight < contentHeight; i++) {
                contentTxt = contentArea.innerHTML;
                beword = beword.substring(0, beword.length - 1);//每次删掉最后一个
                contentArea.innerHTML = beword + " -- " + afword;//剩余的字符插入
                contentHeight = contentArea.clientHeight;//重新计算高度
                j++
                if (j > 1000) {
                    return //防止出现意外卡死
                }
            }
            //得到正好符合高度的文字，替换beword最后一个文字
            let newText = beword.substring(0, beword.length - 1) + '...' + "<span style='color:blue'>" + " -- " + afword + "</span>";
            contentArea.innerHTML = newText;
        }
    }
</script>

</html>