在项目汇总，我们有这样的需求，如果内容多了，就自动省略，自动添加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. 解决局域网IP冲突

    进入cmd ipconfig -all 查看现有IP,发现IP不是192.168.1.*的形式,而是192.168.0.*等异常 ipconfig -release  释放现有IP ipconfig ...

  2. [转帖学习]Oracle的 SYS_CONTEXT 函数简介

    Oracle的 SYS_CONTEXT 函数简介 https://blog.csdn.net/IndexMan/article/details/48606369 1.什么是SYS_CONTEXT? S ...

  3. dotTrace 每行执行时间和执行次数

    如果代码中出现效率问题,使用dotTrace来跟踪分析代码的效率问题还是很方便的.使用dotTrace不但可以看到每一个方法被调用的次数和总时间,而且可以引入源代码,查看源代码中每一行执行的次数和时间 ...

  4. 【设计模式】—— 桥接模式Bridge

    前言:[模式总览]——————————by xingoo 模式意图 这个模式使用的并不多,但是思想确实很普遍.就是要分离抽象部分与实现部分. 实现弱关联,即在运行时才产生依赖关系. 降低代码之间的耦合 ...

  5. Oil Skimming HDU - 4185（匹配板题）

    Oil Skimming Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  6. 【题解】 [ZJOI2008] 泡泡堂（贪心/二分图/动态规划）

    懒得复制,戳我戳我 Solution: 就是有一个贪心策略:(以下假设使\(A\)队分数更高) \(First:\)比较两个分值的最小值,如果\(A\)最小分比\(B\)最小分大就直接比较两个最小的, ...

  7. AtCoder Grand Contest 006

    AtCoder Grand Contest 006 吐槽 这套题要改个名字,叫神仙结论题大赛 A - Prefix and Suffix 翻译 给定两个串,求满足前缀是\(S\),后缀是\(T\),并 ...

  8. 【转】一招解决MCU启动异常

    对于主电源掉电后需要继续工作一段时间来用于数据保存或者发出报警的产品,我们往往都能够看见产品PCB板上有大电容甚至是超级电容器的身影.大容量的电容虽然能延时系统掉电,使得系统在电源意外关闭时MCU能继 ...

  9. POJ 2240 Arbitrage / ZOJ 1092 Arbitrage / HDU 1217 Arbitrage / SPOJ Arbitrage（图论，环）

    POJ 2240 Arbitrage / ZOJ 1092 Arbitrage / HDU 1217 Arbitrage / SPOJ Arbitrage(图论,环) Description Arbi ...

  10. 输入一个十进制的数到dx_ax,然后十六进制转十进制输出

    ;HtoD data segment n dw ? data ends stack segment db dup(?) stack ends code segment assume cs:code,s ...