vue移动端h5,文本溢出显示省略号,且展示‘更多’按钮

news2024/11/14 11:11:17

问题:

元素宽度100%,宽度会随着浏览器缩放而变化。元素内文本超过4行时显示省略号,同时展示‘更多’按钮,点击更多按钮展示全部文本。如下图所示
在这里插入图片描述

超出四行显示省略号(…)的代码

.content{
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 100px;
}

分析:

文本超出4行显示省略号可以通过display box实现,但是超出后展示‘更多’按钮不好处理,因为无法得知文本是否展示省略号。在行高固定20px的情况下,通过js获取元素高度也可以计算出文本的行数,又因为宽度会跟随浏览器宽度变化,所以需要监听resize事件,实时获取元素高度,计算行数。这样处理也可以满足需求,只是太过复杂,而且在resize事件中实时获取元素高度再计算,可能会卡顿。对于样式问题,尽可能的通过样式来处理,下面介绍另一种实现方案。

解决方法:

html代码
在这里插入图片描述
类名对应的css代码

.content{
  width: 100%;
  font-size: 26px;
  line-height: 40px;
  max-height: 160px;
  overflow: hidden;
  position: relative;
}
.virtual{
  position: absolute;
  top: -40px;
  left: 0px;
  right: 0;
  max-height: 200px;
  overflow: hidden;
  color: transparent;
}
.more{
  position: absolute;
  top: 160px;
  right: 0;
  font-size: 26px;
  cursor: pointer;
  background-color: white;
  color: #666;
}
.light{
  color: blue;
}
  • content是用来展示的元素,最大高度80px(四行高度),超出隐藏。
  • virtual是content的子元素,相对于content绝对定位,top为-20px(负一行高度),virtual内的文本和content相同,宽度也和content相同,virtual字体透明不显示,最大高度100px(五行高度),超出隐藏。
  • more是更多按钮,相对virtual绝对定位,top为80px(定位在more的第五行),背景白色(为了遮挡底部文本)。

所以:

  1. content的内容小于四行时,virtual的内容小于四行,超出隐藏,more不展示
  2. content的内容到了第四行但未超出第四行时,virtual内容小于五行,more不展示
  3. content的内容超出四行时,virtual内容大于等于五行,more展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/392102.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Spring】入门概述(一)

🚗Spring学习第一站~ 🚩本文已收录至专栏:Spring家族学习之旅 👍希望您能有所收获 一.初识 Spring并不是单一的一个技术,而是一个大家族,发展到今天已经形成了一种开发的生态圈,Spring提供了若…

JavaScript(2)

一、事件 HTML事件是发生在hTML元素上的“事情”。比如&#xff1a;按钮被点击、鼠标移动到元素上等… 事件绑定 方式一&#xff1a;通过HTML标签中的事件属性进行绑定 <input type"button" value"点我" onclick"on()"><script>fun…

C++基础 | 从C到C++快速过渡

一、开发环境 c使用的编译器是g。 vim或者vscodeclionVS 二、C版本的Hello World /*** brief c版本helloworld示例* author Mculover666* date 2023/2/26*/#include <iostream> using namespace std;int main() {int a 1;double b 3.14;char c[] "str…

软件测试用例篇(4)

测试知识回顾: 我们想要根据需求来写测试用例&#xff0c;首先要保证的需求的合理性和正确性&#xff0c;首先要验证需求&#xff0c;需求合理&#xff0c;理解需求&#xff0c;细化需求&#xff0c;把大需求细化成小需求&#xff0c;根据每一个小需求提炼出功能点根据每一个功…

html+css 实现 熊猫样式

效果 html代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible"…

【MySQL高级篇】第01章 Linux下MySQL的安装与使用

第01章 Linux下MySQL的安装与使用 1. 安装前说明 1.1 查看是否安装过MySQL 如果你是用rpm安装, 检查一下RPM PACKAGE&#xff1a; rpm -qa | grep -i mysql # -i 忽略大小写检查mysql service&#xff1a; systemctl status mysqld.service1.2 MySQL的卸载 1. 关闭 mysql …

工控机ARM工业边缘计算机搭建Node-Red环境

搭建Node-Red环境Node-RED是一个基于Node.js的开源可视化流程编程环境&#xff0c;可以轻松构建自定义应用程序&#xff0c;通过连接简单的节点来完成复杂的任务。Node-RED提供了一种简单的方法&#xff0c;可以快速连接到外部服务&#xff0c;从而实现物联网应用的开发。Node-…

乡村企业门户网站

技术&#xff1a;Java、JSP等摘要&#xff1a;随着时代的发展&#xff0c;电脑与Internet已经进入我们的生活。信息时代的来临&#xff0c;知识经济的扩张&#xff0c;网站已越来越靠近我们的生活。据CNNIC报告显示&#xff0c;中国上网用户有6800万。通过Internet来经营运作一…

寻找时空中的引力波:科学家控制量子运动至量子基态

据英国每日邮报报道&#xff0c;时空织布里的涟漪或可以揭示宇宙在140亿年前是如何产生的&#xff0c;然而寻找这些名为“引力波”的涟漪却一直难以捉摸。现在美国科学家们声称他们发现了改善用于检测宇宙大爆炸的引力波的探测器的方法。 ​宇宙大爆炸残留的引力波 美国加州理…

电脑文件软件搬家迁移十大工具

10 大适用于 Windows 的数据迁移软件。 数据迁移至关重要&#xff0c;几乎所有组织都依赖于此。如果您认为数据传输不是一件容易的事&#xff0c;那么数据迁移软件可以帮上忙。 1、奇客电脑迁移 将现有操作系统、软件、文件迁移到 新电脑的最佳方法之一是使用名为奇客电脑迁移…

SpringMvc快速启动

Spring快速启动 1、tomcat配置 仔细查看下图标记位置配置 添加Tomcat server时选择LocalApplcation server选择Http port与JMX port 2、Project Structure 打开FIle -> Project Structure&#xff0c; 确认WEB-INFO下是否添加了lib&#xff0c;并将.jar包加入lib包中 …

mysql 主从复制 双主双从

master4: 配置 ./etc/my.cnf #主服务器唯一Id server-id4 #启用二进制日志[必填] #log-bin自己mysql的路径/mysqlbin #主机&#xff0c;0:读写,1:只读 read-only0 #忽略不需要同步的数据库 #binlog-ignore-dbmysql #需要同步的数据库:数据库名 binlog-do-dbtest #作为从库…

糖化学类854262-01-4,Propargyl α-D-Mannopyranoside,炔丙基 α-D-吡喃甘露糖苷

外观以及性质&#xff1a;Propargyl α-D-Mannopyranoside一般为白色粉末状&#xff0c;糖化学类产品比较多&#xff0c;一般包括&#xff1a;葡萄糖衍生物、葡萄糖醛酸衍生物&#xff0c;氨基甘露糖衍生物、半乳糖衍生物、氨基半乳糖衍生物、核糖衍生物、阿拉伯糖衍生物、唾液…

童流感诊治最新共识,专家全面解读

流感高发季节已经到来&#xff0c;孩子们接种疫苗吗&#xff1f;流感是人类面临的主要公共健康问题之一&#xff0c;儿童是流感的高危人群和严重病例的高危人群。近日&#xff0c;中华医学会呼吸病学年会第22届全国呼吸病学学术会议在福建厦门召开。会上&#xff0c;首都医科大…

Vue(1)-vue核心

1.Vue核心 【课程链接】 目录1.Vue核心1.1.Vue介绍1.1.1.官网1.1.2.介绍与描述1.1.3.Vue 的特点1.1.4.与其它 JS 框架的关联1.1.5.Vue 周边库1.2.初识vue1.3.Vue模板1.4.数据绑定1.5.el和data的两种写法1.6.MVVM模型1.7.数据代理1.7.1.回顾Object.defineProperty方法1.7.2.理解…

C++单例模式实现

目录 1.提出的需求 ​​​​​​​2.如何定义一个类&#xff0c;使得这个类最多只能创建一个对象&#xff1f; ​​​​​​​3.代码 ​​​​​​​4.小结 C/CLinux服务器开发/后台架构师【零声教育】-学习视频教程-腾讯课堂 ​​​​​​​1.提出的需求 在架构设计时&am…

有什么比较好的bug管理工具?5款热门工具推荐

工具再优秀&#xff0c;适合自己才最重要。 为尽量讲透这个问题&#xff0c;本文的行文结构我先整理如下&#xff1a; 1、为什么需要bug管理工具&#xff1f; 2、好的bug管理工具的标准是什么&#xff1f; 3、好的bug管理工具推荐&#xff08;5款&#xff09; 4、如何挑选适合…

【SpringCloud】SpringCloud教程之Nacos实战(一)

目录Nacos是什么&#xff1f;一.Nacos下载二.安装Nacos三.Nacos原理四.Nacos快速入门五.Nacos服务多级存储模式六.Nacos根据集群设置负载均衡1.根据同集群优先访问2.根据权重配置负载均衡七.Nacos的环境隔离八.Nacos和Eureka的区别前提&#xff1a;以订单服务和用户服务为例&am…

HyperLPR3车牌识别-Android使用:SDK编译与部署

简介HyperLPR在2023年初已经更新到了v3的版本&#xff0c;该版本与先前的版本一样都是用于识别中文车牌的开源图像算法项目&#xff0c;最新的版本的源码可从github中提取&#xff1a;https://github.com/szad670401/HyperLPRAndroid SDK for HyperLPR3说明HyperLPR3的官方源码…

最深情的告白——郁金香(Python实现)

目录 1 最深情的告白 2 即兴赞之 2.1 李小白言郁金香 2.2 郁金香般的姑娘 2.3 荷兰的郁金香 3 Python代码实现 3.1 郁金香的芬芳 3.2 我俩绚丽多姿的风景 1 最深情的告白 曾经以为&#xff0c;她爱玫瑰&#xff0c;然后我画了好几种&#xff1a; 花仙子——玫瑰&a…