<!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. 霞鹜文楷 字体推荐 - 'Fira Code', '霞鹜文楷等宽 Light',

    霞鹜文楷 字体推荐 字体推荐 在vscode里面 'Fira Code', '霞鹜文楷等宽 Light', 仓库 https://github.com/lxgw/LxgwWenKai https:// ...

  2. kubectl create 与 kubectl apply的区别

    kubectl apply和kubectl create都是Kubernetes(k8s)中用于创建或更新资源的命令,但它们在使用方式.功能和灵活性上存在一些区别. 声明式与命令式: kubectl ...

  3. 基于恒玄WT250芯片的蓝牙辅听耳机方案调试总结

    前记 在蓝牙辅听领域卷了几年之后.各种型号的蓝牙辅听器都做过.这次,客户需要一款性价比超高的蓝牙辅听器.经过成本以及功能考量的筛选.最终定下来使用wt250来做一款低成本的蓝牙辅听器. 硬件部分 wt ...

  4. 移植openssh-7.5p1(包括openssl-1.0.2l、zlib-1.2.11)到HISI3520d(部署篇)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  5. Django：Nginx 启动，无法加载样式，无法加载静态文件

    一般是由于 Nginx 配置文件的问题 # 编辑 Nginx 配置文件 vim /etc/nginx/nginx.conf # 如果出现下面这个 use nginx 就需要改成 use root 保存 ...

  6. 360Linux 运维工程师面试真题

    360Linux 运维工程师面试真题 首先我们来看下 360Linux 运维工程师招聘岗位要求: [岗位定义]运维工程师 [岗位薪资]15K-25K [基本要求]北京 / 经验不限 / 本科及以上 / ...

  7. 引领文旅新体验！3DCAT实时云渲染助力打造“永不落幕”的湾区文采会元宇宙

    2022年11月25日至27日,2022年粤港澳大湾区公共文化和旅游产品(东莞)采购会(简称"湾区文采会")在广东省东莞市文化馆举行. 文采会期间,文采会元宇宙线上虚拟展厅全新亮相 ...

  8. HeaderedContentControl实现左右对称

    在我们使用TextBlock却想给前面添加固定字段的时候,发现TextBlock没有Header属性, 这个时候我们可以用到HeaderedContentControl 然而,默认情况下Headere ...

  9. 记录-JavaScript常规加密技术

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 当今Web开发中,数据安全是一个至关重要的问题,为了确保数据的安全性,我们需要使用加密技术.JavaScript作为一种客户端编程语言,可 ...

  10. Java字符串比较 == 和 equals方法的区别

    今天在排除一个bug的时候出现了一个很低级但是也很容易被忽视的错误,在此写了一个小例子做记录. 首先我先说一下错误的场景,我读取了一段json数据,并使用JSONObject的实例对象的getStri ...