在项目汇总，我们有这样的需求，如果内容多了，就自动省略，自动添加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. Git从零开始（二）

    前面提交了一个test1.txt文件,接下来看看这个文件接下来的命运. 一.继续修改并提交 在test1.txt中修改后, git status 查看git的状态, 会提示我们文件test1.txt被 ...

  2. Java之资源文件读取

    ClassLoaderWrapper.java package org.utils.resource; import java.io.InputStream; import java.net.URL; ...

  3. Codeforces Round #528 Div. 1 自闭记

    整天自闭. A:有各种讨论方式.我按横坐标排了下然后讨论了下纵坐标单调和不单调两种情况.写了15min也就算了,谁能告诉我printf和cout输出不一样是咋回事啊?又调了10min啊?upd:突然想 ...

  4. bzoj 1050 [HAOI2006]旅行comf （并查集）

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1050 思路: 先将每条边的权值排个序优先小的,然后从小到大枚举每一条边,将其存到并查集 ...

  5. youcompleteme 自动补全

    1. 拷贝配置文件 cp ~/.vim/bundle/YouCompleteMe/cpp/ycm/.ycm_extra_conf.py ~/.vim/.ycm_extra_conf.py 2. 修改配 ...

  6. 【刷题】BZOJ 4945 [Noi2017]游戏

    Description http://www.lydsy.com/JudgeOnline/upload/Noi2017D2.pdf Solution 字符串里的'x'看起来很烦,于是考虑枚举这些'x' ...

  7. 【树状数组套主席树】带修改区间K大数

    P2617 Dynamic Rankings 题目描述给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+ ...

  8. 洛谷 P2527 [SHOI2001]Panda的烦恼 解题报告

    P2527 [SHOI2001]Panda的烦恼 题目描述 panda是个数学怪人,他非常喜欢研究跟别人相反的事情.最近他正在研究筛法,众所周知,对一个范围内的整数,经过筛法处理以后,剩下的全部都是质 ...

  9. IntelliJ IDEA远程调试运行中的JAVA程序/项目

    一.IntelliJ IDEA配置 1.添加一个运行配置(remote项) 2.打开remote项配置对话框 3.远程jvm参数配置提示 4.远程调试的ip地址和端口号,ip就是java项目所在机器i ...

  10. bzoj4807 車

    题目大意: Description 众所周知,車是中国象棋中最厉害的一子之一,它能吃到同一行或同一列中的其他棋子.車跟車显然不能在一起打 起来,于是rly一天又借来了许多许多的車在棋盘上摆了起来……他 ...