js文本内容显示6行，超出6行出现显示更多按钮，css样式超出行数只能使用...去替代

深藏阁楼爱情的钟 2023-02-19 09:30 6阅读 0赞

js处理文本内容显示6行，超出6行出现显示更多按钮，对于网上说的css样式处理，基本上都是超出6行使用…去处理，不符合需求，先看结果，再看需求：如下

先看实现结果，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]

需求：产品经理提出详情信息中默认只展示6行，超出6行后，显示“展示更多”按钮。  
分析：小编接到这个需求也是一脸懵，经过几天的闲时思考，终于实现！对于网上说的css样式处理，基本上都是超出6行使用…去处理，不符合需求，所以还得分析，如下  
1，宽度不定（移动端），高度不定，文本内容不定（文字可以是汉子，字母，数字等），几乎什么都不确定，如何控制？如何才能知道什么情况下才是第6行？  
2，经过思考，小编得到一个公式：**行数=文本高度 / 行高；**  
3，通过这个计算行数公式，小编确定行高，如**line-height: 20px;**  
4，先把文本的所有内容进行展示，此时，文本div不设置高度  
5，获取文本div的**offsetHeight**（vue可以使用ref获取）  
6，文本高度和行高都确定了，就可以得到总行数  
7，根据这个总行数是否大于6进行判断，大于6行，则现实“展示更多”，小于6的不显示

说明：  
本案例是小编特写的，几乎没有样式，主要是想讲解这个实现思路，希望对看到这篇文章的有帮助！！！  
代码如下：

<template>
        <div>
    
            <div class="lines" ref = "lines" :style="{height:lineFlag ? '120px' : 'auto'}">
                噫吁嚱，危乎高哉！蜀道之难，难于上青天
                蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。
                问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
                剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
    
            </div>
            <div v-if="lineNum>6">
                <span class="more" v-if="lineFlag" @click="moreInfo">展示更多</span>
                <span class="more" v-else @click="moreInfo">收起</span>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "LineTest",
            data(){
                return{
                    lineNum :0,
                    lineFlag:false,
                }
            },
            mounted() {
                this.lineNum = this.$refs.lines.offsetHeight /20;
                this.lineNum >6? this.lineFlag = true: this.lineFlag=false;
                //console.log("lines=offsetHeight==",this.lineNum)
            },
            methods:{
                moreInfo(){
                    this.lineFlag = !this.lineFlag;
                }
            }
        }
    </script>
    
    <style scoped>
    
        .lines{
            width: 500px;
            /*border: 1px solid gray;*/
            line-height: 20px;
            margin: 50px auto 0;
            text-align: left;
            overflow: hidden;
            background: #999999;
        }
        .more{
            text-decoration: underline;
            margin-left: 425px;
        }
        .more:hover{
            cursor: pointer;
        }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200619234722427.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200619234755499.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70