<!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. C++ Qt开发：QNetworkAccessManager网络接口组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用QNe ...

  2. Elasticsearch 如何保证写入过程中不丢失数据的

    丢失数据的本质 在本文开始前,首先明白一个点,平时我们说的组件数据不丢失究竟是在指什么,如果你往ES写入数据,ES返回给你写入错误,这个不算数据丢失.如果你往ES写入数据,ES返回给你成功,但是后续因 ...

  3. dev-sidecar 让github 可以正常访问

    dev-sidecar https://gitee.com/docmirror/dev-sidecar/releases

  4. Android 开发day1

    下载了安卓开发软件 Android studio 下载过程中遇到了,C盘默认安装路径不匹配问题,因为我的系统文件是中文的,软件是国外的软件,导致了他不让我安装,我还是最后在C盘创建了一个文件后,直接安 ...

  5. 干货分享 | UE游戏鼠标双击判定

    UE虚幻引擎对于游戏开发者来说都不陌生,市面上有47%主机游戏使用虚幻引擎开发游戏.作为是一款游戏的核心动力,它的功能十分完善,囊括了场景制作.灯光渲染.动作镜头.粒子特效.材质蓝图等.本文介绍了虚幻 ...

  6. python面向对象（反射、内置方法、元类）

    一 反射 # 静态语言:在执行前就定义好数据类型 # var x int=8 # 动态语言:在执行的时候,才识别数据类型 # x = 8 # 什么是反射? # 指的是在程序运行过程中可以"动 ...

  7. 超高并发下，Redis热点数据风险破解

    ★ Redis24篇集合 1 介绍 作者是互联网一线研发负责人,所在业务也是业内核心流量来源,经常参与 业务预定.积分竞拍.商品秒杀等工作. 近期参与多场新员工的面试工作,经常就 『超高并发场景下热点 ...

  8. 记录--用 Vue 实现原神官网的角色切换效果

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 为了更好的了解原神角色,我模仿官网做了一个角色切换效果,在做的过程当中也总结了一些技术点. 为了让大家更好的体验,我兼容了 PC 端 ...

  9. WPF如何封装一个可扩展的Window

    前言 WPF中Window相信大家都很熟悉,有时我们有一些自定义需求默认Window是无法满足的,比如在标题栏上放一些自己东西,这个时候我们就需要写一个自己的Window,实现起来也很简单,只要给Wi ...

  10. 'scanf': This function or variable may be unsafe

    'scanf': This function or variable may be unsafe. Consider using scanf_s instead. To disable depreca ...