<!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. linux环境下基于python的OpenCV 保存视频

    一 概念 在OpenCV中保存视频使用的是VedioWriter对象,在其中指定输出文件的名称, A 创建视频写入的对象 out = cv2.VideoWriter(filename,fourcc, ...

  2. 关于linux在笔记本下耗电的解决方案（只写我实践的部分）

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文发布于 2014-09-22 12:02:54 ...

  3. KingbaseES V8R3集群运维案例---进程内核参数配置集群启动故障

    案例说明: KingbaseES V8R3集群在部署时需要配置与进程间通讯(IPC)相关的内核参数,如果缺失配置或配置错误,kingbasecluster服务在启动过程中将因为内核参数配置错误导致启动 ...

  4. FR常用正则表达式

    禁止输入中文字符 ^[^\u4e00-\u9fa5]{0,}$

  5. linux 禁用休眠，挂起，睡眠

    参照 https://www.cnblogs.com/minseo/p/13557947.html 禁用休眠前查看状态 systemctl status sleep.target suspend.ta ...

  6. 【已解决】MySQL数据库8.0版本 连接失败错误码1251

    错误原因: 是mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password 解决方式: 1. cmd 进入 ...

  7. #差分约束系统#CodeChef Digit Matrix&洛谷 7515 [省选联考 2021 A 卷] 矩阵游戏

    洛谷传送门 DGMATRIX 分析 先任意构造出一个不一定满足值域的矩阵,现在只需要满足值域就可以了. 可以发现,给一行或一列依次加一减一2*2矩阵的和仍然不变,并且如果有解一定能构造出一组方案. 因 ...

  8. #树链剖分，LCA#洛谷 3398 仓鼠找sugar

    题目 多次询问求树上的两条路径是否有公共点 分析 有公共点当且仅当一条路径的LCA在另一条路径上, 否则一定会形成一个环,那树剖求LCA判断一下LCA是否在另一条路径上即可 代码 #include & ...

  9. 【直播回顾】参与文档贡献，开启OpenHarmony社区贡献

      5月25日晚上19点,战"码"先锋第二期直播 <参与文档贡献,开启OpenHarmony社区贡献> ,在OpenHarmony社群内成功举行.   本期课程,由华为 ...

  10. C++ 多线程编程和同步机制：详解和实例演示

    C++中的多线程编程和同步机制使得程序员可以利用计算机的多核心来提高程序的运行效率和性能.本文将介绍多线程编程和同步机制的基本概念和使用方法. 多线程编程基础 在C++中,使用<thread&g ...