<!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判断元素内文字是否超出元素宽度，溢出隐藏的更多相关文章

  1. 当div元素内的内容超出其宽度时，自动隐藏超出的内容

    word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...

  2. js判断数组中是否包含某个元素

    参考:http://www.runoob.com/jquery/misc-inarray.html js判断数组中是否包含某个元素 $.inArray( value, array [, fromInd ...

  3. Js判断数组中是否存在某个元素

    Js判断数组中是否存在某个元素 方法一:indexOf(item,start); Item:要查找的值:start:可选的整数参数,缺省则从起始位子开始查找. indexOf();返回元素在数组中的位 ...

  4. js 判断数组中是否包含某个元素（转载）

    来源:https://www.cnblogs.com/yunshangwuyou/p/10539090.html 方法一:array.indexOf(item,start):元素在数组中的位置,如果没 ...

  5. JS判断数组中是否有重复元素的方法

    判断数组中是否有重复元素,最容易想到的方法是使用2重循环,逐个遍历,比较,但是这个是最慢,最笨的方法,百度得出了更好的方法. var ary = new Array("111",& ...

  6. CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...

  7. js判断数组里是否有重复元素的方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/longzhoufeng/article/details/78840974 第一种方法:但是下面的这种 ...

  8. js判断数组中是否有重复元素

    方法一:正则 var ary = new Array("111","ff","222","aa","222&q ...

  9. JS判断一个数组中有无重复元素（数字）

    前段时间遇到了这个问题 也百度了很多 不过还是用自己的方法解决了 一个超级简单的方法 简单到令人发指 由于直接写文本太丑了 所以还是截图吧 嘻嘻嘻 假如有一个这样的数组 (这是假如  可能每个人的数据 ...

  10. js判断数组中是不是有某个元素

    function in_array(search,array){ for(var i in array){ if(array[i]==search){ return true; } } return ...

随机推荐

  1. pollute 污染 pol=por=pro 向前 lut=释放 结合ps软件里面lut概念记忆

    pollute 污染 pol = por = pro = 向前 lut = 释放 (ps里面有lut的概念) e 动词 向前释放 -> 污染 弄脏 简单记忆 poll / ute poll - ...

  2. C#项目管理引用的dll文件

    这篇文章主要简单记录一下C#项目的dll文件管理方法,以便后期使用. 设置dll路径 参考C#开发奇技淫巧三:把dll放在不同的目录让你的程序更整洁中间的 方法一:配置App.config文件的pri ...

  3. ETL工具-KETTLE教程实例实战3----转换（输入、输出）

    ETL工具-KETTLE教程实例实战3----转换(输入.输出) 欢迎关注笔者的公众号: java大师, 每日推送java.kettle运维等领域干货文章,关注即免费无套路附送 100G 海量学习.面 ...

  4. [leetcode 496. 下一个更大元素 I] 单调栈

    单调栈的写法: import java.util.ArrayDeque; import java.util.Deque; import java.util.HashMap; import java.u ...

  5. 如何利用云流送（Cloud Streaming）构造一个全三维、沉浸式的数字化虚拟景区

    随着科技的发展,数字化虚拟景区已经离我们越来越近!所谓数字化虚拟景区,即利用现代计算机数字技术,模拟真实景区,实现在计算机和互联网上再现景区的真实场景. 数字化虚拟景区一般包含以下内容: 数字电子沙盘 ...

  6. python基础六（函数基础及参数使用）

    一. 函数定义 1.什么是函数 函数就相当于具备某一功能的工具 函数的使用必须遵循一个原则: 先定义 后调用2.为何要用函数 代码冗余,程序的组织结构不清晰,可读性差 可维护性.扩展性差3.如何用函数 ...

  7. Go | 浅谈包管理模式

    任何一门编程语言都离不开对各种工具包的使用,工具包的管理就显得异常重要了.Go 的包管理方式是逐渐演进的,本文介绍Go语言的两种包管理模式. GOPATH模式引包(不推荐) 在 1.5 版本之前,所有 ...

  8. Java内存马2-Spring内存马

    Spring内存马 目录 Spring内存马 1.Spring&Spring MVC简介 2.环境搭建 3.Controller内存马 4.踩坑日记 5.Interceptor内存马 1.Sp ...

  9. KingbaseES 数据库CPU使用率过高问题与解决

    前言 本文介绍生产环境中CPU使用率高的常见原因,以及在CPU使用率高问题上的可能解决措施. 本文主要内容: 关于用于识别高CPU使用率的工具,例如kwr报告中DB CPU指标.kmonitor和sy ...

  10. KingbaseES V8R6集群运维案例之---同一主机节点部署多个集群

    案例说明: 在同一主机环境,由于生产需要,需要部署两个集群:本案例详细描述了两个集群的部署过程. 注意:同一主机部署多个集群需要先部署securecmdd服务,节点之间通过securecmdd服务通讯 ...