文本溢出显示省略号时展示‘查看更多’按钮
问题：
元素宽度100%，宽度会随着浏览器缩放而变化。元素内文本超过4行时显示省略号，同时展示‘更多’按钮，点击更多按钮展示全部文本。如下图所示
分析：
文本超出4行显示省略号可以通过display box实现，但是超出后展示‘更多’按钮不好处理，因为无法得知文本是否展示省略号。在行高固定20px的情况下，通过js获取元素高度也可以计算出文本的行数，又因为宽度会跟随浏览器宽度变化，所以需要监听resize事件，实时获取元素高度，计算行数。这样处理也可以满足需求，只是太过复杂，而且在resize事件中实时获取元素高度再计算，可能会卡顿。对于样式问题，尽可能的通过样式来处理，下面介绍另一种实现方案。
解决方法：
- content是用来展示的元素，最大高度80px（四行高度），超出隐藏。
- virtual是content的子元素，相对于content绝对定位，top为-20px（负一行高度），virtual内的文本和content相同，宽度也和content相同，virtual字体透明不显示，最大高度100px（五行高度），超出隐藏。
- more是更多按钮，相对virtual绝对定位，top为80px（定位在virtual的第五行），背景白色（为了遮挡底部文本）。
所以：
- content的内容小于四行时，virtual的内容小于四行，超出隐藏，more不展示
- content的内容到了第四行但未超出第四行时，virtual内容小于五行，more不展示
- content的内容超出四行时，virtual内容大于等于五行，more展示
其他点击‘更多’按钮展示全部文本等实现很简单，就不再补充
文本溢出显示省略号时展示‘查看更多’按钮相关推荐
- 文本溢出显示省略号，鼠标浮动查看全部内容
目录 1.文本溢出显示省略号 2.鼠标浮动查看全部内容 1.文本溢出显示省略号 今天做项目时遇到一种需求:文本溢出截断省略,上网查阅了一下,还是挺简单的,但是考虑到自己疑似老年痴呆的大脑,就在这里整理 ...
- 关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号 单行文本溢出显示省略号 方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
- 2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
- web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 文本溢出显示省略号效果
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
- CSS文本溢出显示省略号怎么实现？
前言 我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号 代码示例: <!D ...
- css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...
- css overflow 省略号,图文详解CSS文本溢出显示省略号效果（text-overflow）
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
- html设置文字出现效果,文本溢出显示省略号效果怎么实现？
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
最新文章
- 小乐乐打游戏（BFS+曼哈顿距离）
- 汉语编程能获得诺贝尔奖
- MySQL找出锁等待
- 学习SQL数据更新，这一篇就够了！
- Python爬虫爬取美剧网站
- Linux负载均衡软件LVS之一（概念篇）
- 百度超级链Xuper关于金额相关问题
- 学习笔记---将Asp.Net网站发布到IIS的四种方法及注意事项
- 龙卷风路径_关于龙卷风，看这篇文章就够了
- ef常见面试题_C#基本面试题
- Python的图像处理库Pillow
- C#敏感词汇过滤(不是正则)
- Ubuntu 桌面美化: 1.命令行terminal显示时间用户conda环境2.桌面自动更换轮换壁纸Bing Wallpaper
- vivado时序分析 实例
- mac序列号生成主板号_如何查找Mac的序列号（即使您没有Mac也是如此）
- C语言去掉字符串首尾空格,C语言实现去除字符串首尾空格
- uni-app生成分享图片（ 使用 Painter 生成分享海报）
- 义乌购API，item_search - 根据关键词取商品列表
- 教程：如何把公众号变成淘宝查券返利机器人
- latex表格内部自定义换行