在项目汇总，我们有这样的需求，如果内容多了，就自动省略，自动添加title

这个需要判断判断俩个值，一个是width（），一个是scrollWidth，

在div中，如果内容没有超过边框，这俩个值是一样的，就是css设置的宽度；如果内容超过边框了，scrollWidth的值会大于width，所以我们可以通过判断scrollWidth和width的值

来知道内容是否超过边框

例：

 <!DOCTYPE html>

 <html lang="zh">

 <head>

   <meta charset="UTF-8">

   <meta http-equiv="x-ua-compatible" content="ie=edge">

   <title>Title</title>

   <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">

   <script type="text/javascript" src="../jquery-3.1.1.js"></script>

   <style>

     .test1{

       width: 200px;

       height: 20px;

       overflow: hidden;

       text-overflow: ellipsis;

       white-space: nowrap;

     }

   </style>

 </head>

 <body>

    <div>

      <div class="test1">阿尔瓦尔</div>

      <div class="test1">阿尔瓦尔方式顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多</div>

    </div>

    <script>

      $(function () {

        console.log($(".test1").eq().width())

        console.log($(".test1").eq()[].scrollWidth)

        for(var i = ;i<$(".test1").length;i++){

          if($(".test1").eq(i).width() < $(".test1").eq(i)[].scrollWidth){

            $(".test1").eq(i).attr("title",$(".test1").eq(i).text())

          }

        }

      })

    </script>

 </body>

 </html>

在table中，就不能这样判断了，就算内容没有超过边框，scrollWidth也会大于width，所以我们只用scrollWidth就行，先通过计算获取内容少时scrollWidth的值，然后同判断

如果当前的scrollWidth大于之前计算的值，就说明内容超过边框了

例：

 <!DOCTYPE html>

 <html lang="zh">

 <head>

   <meta charset="UTF-8">

   <meta http-equiv="x-ua-compatible" content="ie=edge">

   <title>Title</title>

   <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">

   <script type="text/javascript" src="../jquery-3.1.1.js"></script>

   <style>

     table{

       width: 1080px;

       table-layout: fixed;

       border-collapse: collapse;

       margin:  auto;

     }

     thead{

       width: auto;

       font-size: 14px;

       text-align: center;

       background-color: #;

     }

     thead tr,thead th{

       border: 1px solid #dddddd;

       border-left: none !important;

       color: #ffffff;

       height: 50px;

       font-size: 14px;

     }

     thead tr img,tbody td img{

       width: 14px;

       height: 14px;

       cursor: pointer;

     }

     tbody{

       width: auto;

       min-width: 1070px;

       font-size: 14px;

       text-align: center;

       border-bottom: 1px solid #dddddd;

       background-color: #ffffff;

     }

     tbody tr,tbody td{

       border-left: 1px solid #dddddd;

       border-right: 1px solid #dddddd;

       height: 67px;

       color: #;

     }

     tbody td{

       overflow: hidden;

       text-overflow: ellipsis;

       white-space: nowrap;

     }

   </style>

 </head>

 <body>

    <table>

      <tbody>

        <tr>

          <td class="test2">我是</td>

          <td class="test1" width="">我是1反倒</td>

          <td>我是2</td>

        </tr>

        <tr>

          <td>我是</td>

          <td class="test1" width="">我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所</td>

          <td>我是2</td>

        </tr>

        <tr>

          <td>我是</td>

          <td class="test1" width="">我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所</td>

          <td>我是2</td>

        </tr>

      </tbody>

    </table>

    <script>

      $(function () {

        // 352是最开始算出来的，当内容很少时，scrollWidth值是352

        for(var i = ;i<$(".test1").length;i++){

          if($(".test1").eq(i)[].scrollWidth > ){

            $(".test1").eq(i).attr("title",$(".test1").eq(i).text())

          }

        }

      })

    </script>

 </body>

 </html>

js和css实现内容超过边框，就自动省略，自动添加title的更多相关文章

  1. CSS实现内容超过长度后以省略号显示

    样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: ...

  2. ASP.NET MVC 5 默认模板的JS和CSS 是怎么加载的?

    当创建一个默认的mvc模板后,项目如下: 运行项目后,鼠标右键查看源码,在源码里看到头部和尾部都有js和css文件被引用,他们是怎么被添加进来的呢? 首先我们先看对应的view文件index.csht ...

  3. JavaScript使用localStorage缓存Js和css文件

    对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...

  4. 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  5. 纯css竟可以做出边框这样长宽度的过渡效果

    边框效果如下:鼠标移到下面方形,就有效果   要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...

  6. IE 下JS和CSS 阻塞后面内容总结

    总结: 1.  CSS 都是可以并行下载的. 2.  IE6 和 IE7   JS 不能并行下载,CSS 和 JS 阻塞后面内容下载. 3.  IE8   JS 还是会阻塞图片下载 开始改变加载模式, ...

  7. IE和firefox火狐在JS、css兼容区别

    1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...

  8. js和css兼容问题

    (一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]>  <script type="text/javascript" s ...

  9. CSS简要内容

    1. 简介 用于布局与美化网页(颜色,字体) CSS语言是一种标记语言,不需编译,可直接由浏览器执行 大小写不敏感 CSS定义由选择符.属性.属性取值组成 格式:selector{property:v ...

随机推荐

  1. Mysql的row_format(fixed与dynamic)

     在mysql中, 若一张表里面不存在varchar.text以及其变形.blob以及其变形的字段的话,那么张这个表其实也叫静态表,即该表的row_format是fixed,就是说每条记录所占用的字节 ...

  2. SpringBoot 3.SpringBoot 整合 MyBatis 逆向工程以及 MyBatis 通用 Mapper

    一.添加所需依赖,当前完整的pom文件如下: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&qu ...

  3. CentOS修改主机名字

    目录 查看hostnmae 修改hostname 远程别名/etc/hosts 查看hostnmae [root@centos ~]$ hostname centos 修改hostname [root ...

  4. CUDA ---- GPU架构（Fermi、Kepler）

    GPU架构 SM(Streaming Multiprocessors)是GPU架构中非常重要的部分,GPU硬件的并行性就是由SM决定的. 以Fermi架构为例,其包含以下主要组成部分: CUDA co ...

  5. win10用vncviewer远程登陆ubuntu桌面

    一:安装Ubuntu的服务端桌面环境 # 安装xrdpsudo apt-get install xrdp # 安装xfce4sudo apt-get updatesudo apt-get instal ...

  6. idea和eclipse的区别

    使用基于IntelliJ的IDE,都会对project和module的关系比较糊涂.用简单的一句话来概括是: IntelliJ系中的Project相当于Eclipse系中的workspace.Inte ...

  7. c# DataGridView绑定DataTable对象之后总会多一行

    DataGridView 属性 AllowUserToAddRows = false

  8. 【暴力Treap 或 离线归并】子串计数（genies）

    子串计数(genies) Description 给出一段含有n个元素的序列a,要求求出子串和小于等于t的子串个数 Input Data 输入共两行第一行包含两个整数,n,t分别表示序列a元素的个数和 ...

  9. bzoj1008/luogu3197 越狱 (快速幂)

    算$m^n-m*(m-1)^{n-1}$,就是总的减去不越狱的,不越狱就每次都选一个和上一个不一样的

  10. 洛谷P2672 推销员

    沙雕贪心...... 我一开始想的是倒着来,每次减去一个. 然后我们就有两个决策:去掉最后一个/去掉前面某一个. 然后第一个决策用并查集维护,第二个决策用线段树即可.仔细想想觉得普及组不会考这种东西, ...