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 ...
随机推荐
- Zabbix6.0使用教程 (二)—zabbix6.0常用术语
上一次我们已经详细介绍了zabbix6.0的新增功能,本篇我们来说说zabbix6.0常用的一些术语,这个对小伙伴日常使用zabbix的时候还是非常有用,建议大家收藏起来,话不多说,附上干货. 概览 ...
- 视觉slam十四讲CH5 ---相机与图像
视觉slam十四讲 ---CH5 相机与图像 视觉slam中,作为主要传感器的相机自然起到着重要的作用,而相机拍摄的图像及其处理也是我们要做的工作之一. 1. 相机模型 单目相机的针孔模型 上图中的模 ...
- 世界银行使用.NET 7开发的免费电子问卷制作系统Survey Solution
Survey Solution (下文简称SS) 是世界银行数据部开发的一套免费电子问卷制作系统, 官网地址为: https://mysurvey.solutions/, github地址:https ...
- wav 格式音频文件生成例子
wavfile is a simple sound library for use in CSE 20211. This library allows you to generate arbitrar ...
- js实现回调功能实例
所谓js回调,本人认为无非就是一个函数的参数是另外一个函数,而作为参数的函数就称之为回调函数 <script type="text/javascript"> //要请 ...
- Linux 运维工程师面试真题-3-Linux 磁盘及软件管理操作
Linux 运维工程师面试真题-3-Linux 磁盘及软件管理操作 1.如何添加一块新的 50G 硬盘到 linux 服务器系统作为单独的分区,并正在使用?需要哪些 操作步骤? 2.有个金士顿 U 盘 ...
- Retrofit源码分析
目录介绍 1.首先回顾Retrofit简单使用方法 2.Retrofit的创建流程源码分析 2.1 Retrofit对象调用Builder()源码解析 2.2 Retrofit对象调用baseUrl( ...
- Counts the number of the messages received and sent
我的博客园:https://www.cnblogs.com/CQman/ 本文版权归CQman和博客园共有,欢迎转载,但必须保留此段声明,并给出原文链接,谢谢合作. Symptom Counts t ...
- 记录--页面使用 scale 缩放实践
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 最近接到一个任务,需要把页面放大1.5倍显示.这里使用 css 里的 transform: scale(1.5) 来实现. documen ...
- 网站https 问题记录
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 开发过程中 常见的 https 问题 - 避坑 做前端多年,发现有些问题需要重复解决很多次,浪费了不少时间,https 导致的问题就属于其 ...