<!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下，使用nginx实现动静分离，访问图片报404

    一.需求描述 最近在开发一个微信小程序,由于微信小程序端代码包总大小限定在三四兆,所以有很多的图标资源就不能放在微信小程序中进行打包, 否则会超过微信的限制而无法打包.自己能够想到的最简单的办法就是将 ...

  2. [VueJsDev] 日志 - BBTime-LOG

    [VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html BBTime-LOG ::: details 目录 目录 B ...

  3. Dreamweaver基础教程：系列介绍

    目录 前言 Dreamweaver 软件介绍 软件安装 学习支持 相关资料 前言 我一直对前端的一些技术比较感兴趣,之前有用过GitHub上的开源项目部署了自己的导航网站猿导航,但并没有系统的去深入学 ...

  4. gdb调试入门指北

    GDB安装及其插件控制 下载 GDB ,这个项目将 GDB 的插件放到了一个文件夹下,方便读取文件路径 $ git clone https://gitee.com/hongsofwing/GDB-Pl ...

  5. Android 获取设备的亮度百分比

    一般的屏幕亮度都是0-255,而小米手机的高版本不一样 为了使亮度调节更加细腻, MIUI对原生亮度级别进行了扩展, 由原有的255级调整根据不同屏幕分别支持255/1023/2047/4095级.开 ...

  6. IE故障修复之点击无反应

     第一步,点击开始,运行,打开Regedit,即注册表编辑器.依次找到 >>HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer ...

  7. 三维模型3DTile格式轻量化顶点压缩主要技术方法分析

    三维模型3DTile格式轻量化顶点压缩主要技术方法分析 三维模型顶点压缩是3DTile格式轻量化压缩的重要组成部分,能有效减小数据大小,提高数据处理效率.下面将详细分析几种主要的顶点压缩技术方法: 预 ...

  8. C#调用HTTP POST请求上传图片

    public static string UploadImage(string uploadUrl, string imgPath, string fileparameter = "file ...

  9. verilog设计知识集合

    verilog设计知识集合 一.基本知识 verilog HDL,verilog硬件描述语言,可从上层到下层一直设计,使用一些列分层的模块来表示极其复杂的数字系统的语言.利用EDA工具将模块转化为网表 ...

  10. 【Java】abstract class 和 interface 有什么区别？

    含有 abstract 修饰符的 class 即为抽象类,abstract 类不能创建的实例对象.含有 abstract 方法的类必须定义为 abstract class,abstract class ...