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、先看看实际效果
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实现
5、完结 （不明白可以提问交流、谢谢）
以上这篇vue实现移动端项目多行文本溢出省略就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue 点击展开显示更多(点击收起部分隐藏)
功能如下: 这里就需要一开始只显示6个数据,点击展开才显示全部 HTML里调用showdetailList: <div> <p v-for="(item, index) in showdetailList"> <span>{{item.title}}</span> <span>{{item.name}}</span> </p> </div> <div v-if="detail
-
微信小程序实现指定显示行数多余文字去掉用省略号代替
效果图 实现 wxml <view class='goods-details'> <text class='goods-details-title'>商品详情</text> <text catchtap='showAllAction' class='goods-details-content {{isShowAllContent ?"content-all" :"content-breif"}}'>你如安好,便是晴天你
-
vuejs实现折叠面板展开收缩动画效果
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画. 循环列表,html: <template> <div class="newslist"> <ul> <li v-for="(item,index) in newslist" :key="index"> <p class="p" ref="liCon">{{i
-
vue控制多行文字展开收起的实现示例
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多"会展开所有文案,按钮变成"收起" (未超出三行的时候) (展开) (收起) 代码实现: <template> <div> <p class="m-content overflow-line" id="J_descrip
-
vue实现移动端项目多行文本溢出省略
多行文本溢出省略 在做微信公众号开发时,有个需求是这样的 找到了一个方法, <div> 2323文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示.文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示.文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示.文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示.文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示. </div> <!-- 上面这样写是无效的--> <!--
-
详解vue.js移动端配置flexible.js及注意事项
前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexi
-
vue移动端项目缓存问题实践记录
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面,B页面是列表详情页面,C页面是操作改变B页面的一些东西,进行提交类似的操作.A页面进入B页面,应该根据不同的列表item显示不一样的详情,从B进入C,也应该根据item的标识比如ID展示不一样的内容,在C页面操作后,返回B页面,B页面数据发生变化.这个时候会有两种情况: C页面操作数据后返回B页面,B页面对应
-
从零开始搭建vue移动端项目到上线的步骤
初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录名称) 一路回车如下 中间会让选择ESLint进行项目代码风格检查,为了美观和效率,可以开起来,vue-router用起来,红框框中的两个测试,不要也罢,后面是问要使用哪个进行install依赖包,默认npm好了:然后回车,等待下载依赖:慢的话可以用镜像. 下载完成之后会看到如下提示: 按照步骤往下
-
Vue移动端项目实现使用手机预览调试操作
最近在开发移动端Vue移动端项目,查了一些资料,这里分享下如何在webpack工具构建下的vue项目,在手机端调试和预览,言归正传. 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器,使用同一个wifi: b.笔记本也可以直接启用一个wifi,手机链接笔记本wifi也可以: 2.查询本地IP地址 WIN+R,输入cmd回车,打开命令提示符,输入ipconfig,查看本地IPv4: 3.修改本地项目中IP地址 找到项目中config文件夹,下面index.js文件打开: 找
-
vue移动端项目中如何实现页面缓存的示例代码
背景 在移动端中,页面跳转之间的缓存是必备的一个需求. 例如:首页=>列表页=>详情页. 从首页进入列表页,列表页需要刷新,而从详情页返回列表页,列表页则需要保持页面缓存. 对于首页,一般我们都会让其一直保持缓存的状态. 对于详情页,不管从哪个入口进入,都会让其重新刷新. 实现思路 说到页面缓存,在vue中那就不得不提keep-alive组件了,keep-alive提供了路由缓存功能,本文主要基于它和vuex来实现应用里的页面跳转缓存. vuex里维护一个数组cachePages,用以保存当前
-
浅谈使用Vue完成移动端apk项目
我们项目使用的是Vue和Vant组件,详情都可以看官网哦 Vant Vue 完整项目视频链接 目录结构: 基本配置 入口文件main.js 首先做一个引入 我们的Vant UI组件是按需引入,而Element UI是全部引入 所以引用方式也不同 main.js完整代码 // 引入Vue import Vue from 'vue' // 引入根组件App.vue import App from './App.vue' // 引入router路由 import router from './rout
-
vue中的H5移动端项目 真机测试配置方式
目录 H5移动端项目 真机测试配置 vue cli2 vue cli4 vue h5 真机调试 H5移动端项目 真机测试配置 vue cli2 1.配置网段:(手机和电脑在同一局域网内) 2.在项目中重启命令行(或者cmd)运行 ipconfig 获取到项目在本机运行的ip地址 3.关闭防火墙 4.前端:config文件夹下index.js文件 修改host:为0.0.0.0 修改 axios.defaultsbaseURl = "http://172.20.10.9:8082" 5.
-
vue移动端项目渲染pdf步骤及问题小结
第一步:引入pdf包 import pdf from "vue-pdf-signature";,这里不引入vue-pdf的包后面再做解释 import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js"; (CMapReaderFactory)解决汉字空白的问题 第二步:页面的component注册pdf组件 components: { pdf }, 第三步:页面放置pdf盒子 &l
-
vue.js移动端app实战1：初始配置详解
本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等. 初始工作: 通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西. 个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js