首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现移动端项目多行文本溢出省略

Posted in Javascript onJuly 29, 2020

多行文本溢出省略

在做微信公众号开发时,有个需求是这样的

vue实现移动端项目多行文本溢出省略

找到了一个方法,

<div>
	2323文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。
</div>
<!-- 上面这样写是无效的-->
<!-- 
	下面这样写才有效果
	1,需要在p标签内(其他行内标签没事尝试,比较懒),
	2,需要加两行注释 /* autoprefixer: off */ 和 /* autoprefixer: on */
		至于原因还不清楚,弄明白了之后再更新
-->
<div>
	<p>2323文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。</p>
</div>
p{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  /* autoprefixer: off */ 
  -webkit-box-orient:vertical; 
  /* autoprefixer: on */ 
  -webkit-line-clamp:2; 
 }

补充知识：vue中实现文字超过2行... 展开-收起(兼容ie)

1、先看看实际效果

vue实现移动端项目多行文本溢出省略

2.需求一步一步分析

当文字超出省略号 就想到css样式实现（ie不兼容）

overflow: hidden; 
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

3.由于自己也是一个懒人、就想在网上找找、看了几篇文章都是根据width、height来计算的 看了一下写的比较复杂、都只是针对单个文本来的、现实中一般都是列表展示数据的

代码如下：复制代码即可运行、兼容ie

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

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Vue 中文字超过2行显示省略号 展开-收起</title>
 <style>
 .content {
  display: flex;
  margin-bottom: 30px;
 }

 .text {
  position: relative;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  color: #666666;
 }

 .retract {
  position: relative;
  overflow: hidden;
 }

 .retract:after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 25px;
  padding-left: 30px;
  background: linear-gradient(to right, transparent, #fff 45%);
 }

 .btn {
  position: absolute;
  right: 0;
  bottom: -30px;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 2px;
  color: #FFAD41;
  cursor: pointer;
 }

 .more {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  color: #666666;
  visibility: hidden;
 }
 </style>
</head>

<body>
 <div id="app">
 <div class="view">
  <div class="text more" ref="more">
  占位
  </div>
  <div class="content" v-for="(item, index) in curData" :key="index">
  <div class="text">
   <div :class="{'retract': item.status}" :style="{'max-height':item.status ? textHeight: ''}" ref="textContainer">
   {{item.desc}}
   </div>
   <div class="btn">
   <p v-if="item.status" @click="item.status = false">展开</p>
   <p v-if="item.status == false" @click="item.status = true">收起</p>
   </div>
  </div>
  </div>
 </div>
 </div>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
 new Vue({
 el: '#app',
 data() {
  return {
  curData: [
   { desc: '人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。' },
   { desc: '小说刻画人物的方法：心理描写、动作描写、语言描写、外貌描写、神态描写，同时，小说是一种写作方法。' },
   { desc: '与其他文学样式相比，小说的容量较大，它可以细致地展现人物性格和人物命运，可以表现错综复杂的矛盾冲突，同时还可以描述人物所处的社会生活环境。优势是可以提供整体的、广阔的社会生活。' },
   { desc: '纯文学中的小说体裁讲究纯粹性。“谎言去尽之谓纯。”(出自墨人钢《就是》创刊题词)便是所谓的“纯”。也就是说，小说在构思及写作的过程中能去尽政治谎言、道德谎言、商业谎言、维护阶级权贵谎言、愚民谎言等谎言，使呈现出来的小说成品具备纯粹的艺术性。小说的纯粹性是阅读者最重要的审美期待之一。随着时代的发展，不光是小说，整个文学的纯粹性逾来逾成为整个世界对文学审美的一个重要核心。' }
  ],
  textHeight: null
  }
 },
 mounted() {
  this.curData.forEach((ele, index) => {
  this.$set(this.curData, index, Object.assign({}, ele, { status: null }))
  })
  // DOM 加载完执行
  this.$nextTick(() => {
  this.calculateText()
  })

  window.onresize = () => {
  this.curData.forEach((ele, index) => {
   this.$set(this.curData, index, Object.assign({}, ele, { status: null }))
  })
  setTimeout(() => {
   this.calculateText()
  }, 0)
  }
 },
 methods: {
  // 计算文字 显示展开 收起
  calculateText() {
  // 获取一行文字的height 计算当前文字比较列表文字
  let oneHeight = this.$refs.more.scrollHeight
  let twoHeight = oneHeight * 2 || 40
  this.textHeight = `${twoHeight}px`
  let txtDom = this.$refs.textContainer
  for (let i = 0; i < txtDom.length; i++) {
   let curHeight = txtDom[i].offsetHeight
   if (curHeight > twoHeight) {
   this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: true }))
   } else {
   this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: null }))
   }
  }
  }
 }
 })
</script>

4、分析代码

省略号通过:after伪类实现

文字一行高度、在浏览器中展示都有所区别、所以在这里我在页面放置了一段占位文本设置了隐藏占位

通过获取占位文本的高度 * 2 计算出2行文本内容 动态改变status状态 null-无展开收起 true-展开 false-收起 结合max-height实现

vue实现移动端项目多行文本溢出省略

5、完结 （不明白可以提问交流、谢谢）

以上这篇vue实现移动端项目多行文本溢出省略就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

vue实现移动端项目多行文本溢出省略

- Author -

??的?

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 #Javascript
Element中Slider滑块的具体使用
Jul 29 #Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 #Javascript
javascript实现移动端触屏拖拽功能
Jul 29 #Javascript
Vue实现移动端拖拽交换位置
Jul 29 #Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 #Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 #Javascript
实用文书(952) 申请书(21) AngularJS(2) explain(2) 文书(291) 城市猎人(1) HAM-2000(1) 观后感(479) 波段(1) 西索(1)
You might like
php 中文处理函数集合
2008/08/27 PHP
一些被忽视的PHP函数（简单整理）
2010/04/30 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
解决python报错MemoryError的问题
2018/06/26 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
新闻专业本科生的自我评价分享
2013/11/20 职场文书
战友聚会主持词
2014/04/02 职场文书
金陵十三钗观后感
2015/06/04 职场文书
教师节大会主持词
2015/07/06 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL