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

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

先看实现结果，如下图所示：

需求：产品经理提出详情信息中默认只展示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>

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

css样式超出部分省略号
面试题中经常会出现手写代码,我们平时为了方便都是复制和粘贴为主.虽然知道如何运用,但手写还真未必能手写粗来.因此加强手写代码很有必要. css样式超出部分省略号 width: 30px; overfl ...
怎么修改html行内样式表,原生JS获取及设置CSS样式-1.行内样式
面试中,应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧,让我给大家总结一下~ HTML中样式的写法不外乎以下四种方式行内样式假装有内容 head内部样式 div { widt ...
html行高设置失效,科技常识：关于css中line-height(行高)设置无效的问题的解决方法...
今天小编跟大家讲解下有关关于css中line-height(行高)设置无效的问题的解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于css中line-height(行高)设置无效 ...
js弹出框，点击切换事件，jQuery改变一部分css样式
文章目录 js,声明变量注意点 js弹出框 js.flag=0的使用 js,隐藏样式 jquery改变css样式 js,声明变量注意点 <script>// 声明多个变量 var age= ...
css样式超出隐藏显示...
overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -w ...
html css文本框按钮,css样式之区分input是按钮还是文本框的方法
当你看到这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表 ...
CSS实现单行(多行)文本超出部分用省略号显示
前言(日常废话) 该文写的是CSS如何实现单行以及多行文本末尾的超出部分用省略号来表示. 目录 1.单行超出 2.多行超出正文现在有着一个这样的div,需要两个效果,一个是单行超出部分用省略号表示 ...
文本溢出显示省略号时展示‘查看更多’按钮
问题: 元素宽度100%,宽度会随着浏览器缩放而变化.元素内文本超过4行时显示省略号,同时展示'更多'按钮,点击更多按钮展示全部文本.如下图所示分析: 文本超出4行显示省略号可以通过display ...
bartender 不打印文本内容的解决方法
我的目的我需要的标签内容是,从EXCEL中读取数据做为标签上二维码的内容,除了二维码之外,还有一些固定的文本内容出现坑结果打印的时候只显示了二维码,固定的那些文本并没有打印出来, 中间省略几万字 ...

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

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

最新文章

热门文章