js判断元素内文字是否超出元素宽度，溢出隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字隐藏</title>
</head>
<style>
.content-box {
width: 100px;
border: 5px solid red;
padding: 10px;
box-sizing: content-box;
text-overflow: ellipsis;
overflow: hidden;
}
.border-box {
width: 100px;
border: 5px solid red;
padding: 10px;
box-sizing: border-box;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 10px;
}
</style>
<body>
borderBox
<div class="border-box">
99999991
</div>
contentBox
<div class="content-box">
999999999991
</div>
<script>
// 对于borderBox 只要scrollWidth > clientWidth 那么就代表hidden了
const borderBox = document.querySelector('.border-box')
const contentBox = document.querySelector('.content-box')
console.dir(borderBox)
console.log('borderBox', borderBox.scrollWidth, borderBox.clientWidth) // zdz-log
console.dir(contentBox)
console.log('contentBox',contentBox.scrollWidth,contentBox.clientWidth); // zdz-log
</script>
</body>
</html>
js判断元素内文字是否超出元素宽度，溢出隐藏的更多相关文章
- 当div元素内的内容超出其宽度时，自动隐藏超出的内容
word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...
- js判断数组中是否包含某个元素
参考:http://www.runoob.com/jquery/misc-inarray.html js判断数组中是否包含某个元素 $.inArray( value, array [, fromInd ...
- Js判断数组中是否存在某个元素
Js判断数组中是否存在某个元素 方法一:indexOf(item,start); Item:要查找的值:start:可选的整数参数,缺省则从起始位子开始查找. indexOf();返回元素在数组中的位 ...
- js 判断数组中是否包含某个元素（转载）
来源:https://www.cnblogs.com/yunshangwuyou/p/10539090.html 方法一:array.indexOf(item,start):元素在数组中的位置,如果没 ...
- JS判断数组中是否有重复元素的方法
判断数组中是否有重复元素,最容易想到的方法是使用2重循环,逐个遍历,比较,但是这个是最慢,最笨的方法,百度得出了更好的方法. var ary = new Array("111",& ...
- CSS- 文本超出指定宽度后隐藏并显示为省略号
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...
- js判断数组里是否有重复元素的方法
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/longzhoufeng/article/details/78840974 第一种方法:但是下面的这种 ...
- js判断数组中是否有重复元素
方法一:正则 var ary = new Array("111","ff","222","aa","222&q ...
- JS判断一个数组中有无重复元素（数字）
前段时间遇到了这个问题 也百度了很多 不过还是用自己的方法解决了 一个超级简单的方法 简单到令人发指 由于直接写文本太丑了 所以还是截图吧 嘻嘻嘻 假如有一个这样的数组 (这是假如 可能每个人的数据 ...
- js判断数组中是不是有某个元素
function in_array(search,array){ for(var i in array){ if(array[i]==search){ return true; } } return ...
随机推荐
- Spring事务（一）-事务配置
事务是数据库操作最基本的单元,是逻辑上的一组操作,这一组操作在同一个会话中要么都执行成功,要么都失败,这也是事务的最基本特性--原子性.事务的作用是为了保证系统数据的正确性,因此,数据库应用程序中是会 ...
- Dendron vscode笔记插件 F12 可自动跳转 页面 很实用
Dendron vscode笔记插件 F12 可自动跳转 页面 很实用 Dendron 技巧汇总 新建工作区 新建一个 工作区 建立一个空目录 然后 ctrl + shift P 输入 init 就可 ...
- C++学习笔记之编程思想
目录 编程思想 单例(Singleton)模式 观察者(Observer)模式 void*.NULL和nullptr C的类型转换 C++的类型转换 适配器(Adapter)模式 泛型编程的思想 模板 ...
- 【python】使用百度api进行音频文件转写
[python]使用百度api进行音频文件转写 脚本目标: 智能云的音频文件转写文档只给了个demo,每次只能传1分钟以内的音频啥的,不好直接用,简单打包一下,做到把音频放文件夹,直接出转写结果就行了 ...
- 【深度学习基础】基于Numpy的循环神经网络实现和反向传播训练
本文是<深度学习进阶:自然语言处理>.<神经网络与深度学习>和<动手学深度学习>的读书笔记.本文将介绍基于Numpy的循环神经网络的前向传播和反向传播实现,包括RN ...
- Google Chart API学习(二)
书接上回: combo-charts: <html> <head> <script type="text/javascript" src=" ...
- Performance Improvements in .NET 8 & 7 & 6 -- Thread【翻译】
线程 .NET 的最近版本在线程.并行.并发和异步等方面做出了巨大的改进,例如 ThreadPool 的完全重写(在 .NET 6 和 .NET 7 中),异步方法基础设施的完全重写(在 .NET C ...
- 智慧党建3D可视化方案，扩大党建文化宣传数字网络影响力
信息技术的快速发展加快了社会分化解构,重构了人际传播渠道.随着党员中网民."数字原住民"比重持续攀升,党员工作生活信息化.网络化.数据化持续加深,传统的党建方式对党员,特别是年轻一 ...
- WPF多数类概念性注册加自动扫描
在java中springboot的配置应用了自动扫描 @ComponentScan(value = {"com.example", "com.fox"}) 而对 ...
- 记录--基于Vue2.0实现后台系统权限控制
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 基于Vue.js 2.x系列 + Element UI 的后台系统权限控制 前言:关于vue权限路由的那些事儿-- 项目背景:现有一个后台 ...