html 如何判断文本溢出,判断文本是否溢出
问题
需求:当一个div的内容过多时,显示省略号,并提供一个显示更多的按钮;如果内容较少,正常展示不提供按钮。
分析:以上问题的本质就在于,如何判断div的内容溢出了
(为了方便,方案采用vue的写法)
方案一
方案一为Determine if an HTML element's content overflows中的最高赞回答,主要思想是对比元素的el.clientWidth和el.scrollWidth,如果scrollWidth较大,说明溢出了,否则没溢出。
显示
const el = this.$refs.content
this.showBtn = el.clientWidth < el.scrollWidth
window.addEventListener('resize', () => {
this.showTest = el.clientWidth < el.scrollWidth
})
.test{
width:10%;
background: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
为了测试方便,以上demo加上了改变窗口大小的resize函数,可以发现div宽度增大时,文本不溢出不显示按钮,div宽度缩小时,文本溢出显示按钮
stackoverflow的回答下,有人反映此方案在某些浏览器会出现,文本溢出了,但clientWidth与scrollWidth相等。于是有人提到了另一个方案
方案二
方案二位 HTML text-overflow ellipsis detection的最高赞回答,主要是将div克隆一份但不显示(visibility:hidden),比较两者的宽度,如果副本的宽度大于元素本身的宽度,则表示溢出,否则未溢出
显示
const el = this.$refs.content
const elCopy = this.$refs.contentCopy
this.showBtn = el.clientWidth < elCopy.clientWidth
console.log(el.clientWidth, elCopy.clientWidth)
window.addEventListener('resize', () => {
this.showBtn = el.clientWidth < elCopy.clientWidth
})
.content{
display: inline-block;
width:10%;
background: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content-copy{
display: inline-block;
visibility: hidden;
}
这里要注意一点,此方案中元素不能为block,因为这样eleCopy的宽度会为父元素的100%,而不是由内容撑开的宽度;也不能为inline,因为这样没有width,无法比较;因此将元素设为inline-block
小结
以上2种方案都可以实现判断文本是否溢出,虽然思想有所不同,但其实本质是一样的:都是通过对比文本实际的宽度和显示省略号时的宽度,所以可以从这一点出发,再多多思考有没有其他解决方案。
html 如何判断文本溢出,判断文本是否溢出相关推荐
- R语言ggplot2可视化:通过在element_text函数中设置ifelse判断条件自定义标签文本的显示格式:例如、粗体、斜体等
R语言ggplot2可视化:通过在element_text函数中设置ifelse判断条件自定义标签文本的显示格式:例如.粗体.斜体等 目录
- java校验文件格式_Java 判断文件是否为文本格式,并获取文件编码格式,读取内容!...
我们经常会遇到读取文件内容的情况,就需要判断文件是否为文本文件,及文件编码格式,防止无法读取内容或乱码出现情况. 根据文件扩展名判定不太准确,可能会遇到未知扩展名或被修改了扩展名,下面的测试类使用文件 ...
- e4a获取php的文本,e4a判断编辑框内容
易语言 FOR 安卓使用手册小刀(siyu1840)2013-06-01 前言:易语言 FOR 安卓,以下简称 E4A,是一个基于谷歌 Simple 语言的编程工 具,旨在实现通过类似易语言的 ... ...
- html字段隐藏,HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)
内容介绍热点排行相关文章下载地址↓ 效果非常不错的登录窗口,输入框获取焦点后会自动隐藏默认文本,如果为空会提示必填字段 ,经测试,效果相当不错,感兴趣的朋友可以参考下哈 在网页head区添加以下代码 ...
- 网络知识入门,Web服务器的CGI程序,浏览器如何判断响应内容:文本,图片还是音频文件?(十九)
目录 将请求的uri转换为实际的文件名 运行CGI程序 web服务器的访问控制 浏览器接受响应并返回内容 浏览器接受响应消息后如何显示内容 浏览器显示网页内容:访问完成 将请求的uri转换为实际的文件 ...
- 两个整数相加 相乘 有符号与无符号 溢出判断条件 移位与2的幂
无符号数相加 算术运算溢出:完整的整数结果不能放到数据类型的字长限制中去 无符号数溢出 无符号数求反 补码加法 补码溢出 补码的非 无符号乘法 补码乘法 无符号乘法和补码乘法结果的位模式相同 与2的幂 ...
- 考前自学系列·计算机组成原理·补码定点加减运算和溢出判断,浮点数的加减运算,原码的乘法
补码定点加减运算和溢出判断 浮点数的加减运算 原码乘法
- Verilog 补码加法溢出判断及处理
补码加法运算溢出判断三种方法: 一.符号位判断 Xf.Yf分别两个数的符号位,Zf为运算结果符号位. 当Xf =Yf =0(两数同为正),而Zf=1(结果为负)时,负溢出: 当出现Xf =Yf =1( ...
- 【LeetCode笔记】7.整数反转(Java、溢出判断、栈)
文章目录 题目描述 解法 & 代码 ① 字符串解法 ② 类栈做法 题目描述 边界比较需要考虑,而且还有不允许64位整数的要求. 解法 & 代码 ① 字符串解法 起初想到的做法,不过缺点 ...
最新文章
- LinearLayout (线性布局)的分析
- Science:AI领域那么多引人注目的「进展」,竟是无用功
- UVa10000 - Longest Paths(为什么是WA)
- 米兔点读笔点读包_小米米兔点读笔评测:养成教育只要轻松一点
- Zygote和System进程的启动过程
- 初一级练习题(2019.3.8)
- http的get与post方式下的getParameter获取中文
- [源码和文档分享]基于C++的一元多项式的计算
- 99%的程序员都在用Lombok,原理竟然这么简单?
- Python入门--面向过程,面向对象,类与对象
- vscode开发python使用教程_VSCode 支持Python
- java jar 启动脚本
- Mongodb JAVA API
- 0031 Java学习笔记-梁勇著《Java语言程序设计-基础篇 第十版》英语单词
- Linux配置NTP服务器
- matlab解三角函数方程某值附近,matlab解三角函数已知参数方程
- Python 发送短信
- android 图片3d旋转动画效果,图片UI特效-3D罗盘旋转
- 2010年度十大心理学发现
- 闭环控制步进电机对比传统开环控制的优点