在项目汇总，我们有这样的需求，如果内容多了，就自动省略，自动添加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. Android Manifest文件

    Manifest文件内容 1.自定义权限(Permission) :  <permission android:description="string resource" a ...

  2. CORS跨域资源共享简述

    什么是CORS? 默认情况下,为预防某些而已行为,浏览器的XHR对象只能访问来源于同一个域中的资源.但是我们在日常实际开发中,常常会遇到跨域请求的需求,因此就出现了一种跨域请求的方案:CORS(Cro ...

  3. MySQL : 数据库和表的基本操作总结

    针对database和table的操作大致可分为三类:创建,查询,修改,删除 1. 创建 create ①创建数据库 create database db_name; ②创建表 create tabl ...

  4. CUDA ---- device管理

    device管理 NVIDIA提供了集中凡是来查询和管理GPU device,掌握GPU信息查询很重要,因为这可以帮助你设置kernel的执行配置. 本博文将主要介绍下面两方面内容: CUDA run ...

  5. 【设计模式】—— 备忘录模式Memento

    前言:[模式总览]——————————by xingoo 模式意图 这个模式主要是想通过一个对象来记录对象的某种状态,这样有利于在其他需要的场合进行恢复. 该模式还有跟多可以扩展的地方,比如可以记录多 ...

  6. 安装selenium和chromedriver

    网上找的算法,在运行爬虫代码时,需要Selenium+Phantomjs实现,我改成了用Selenium+Chrome:针对指定网址,自动打开浏览器,输入关键词搜索,并保存搜索的内容. 1. 安装se ...

  7. MT【84】夹逼定值

    分析:此类题还是比较常见的,左右都有不等式,中间夹着一个式子,我们可以找个$x$使得中间式子满足的条件显示出来. 类似的方法可以用在这道浙江高考文科压轴题上

  8. sql知识收集

    在SQL Server里面有top关键字可以很方便的取出前N条记录,但是Oracle里面却没有top的使用,类似实现取出前N条记录的简单方法如下: 方法1:利用ROW_NUMBER函数 取出前5条记录 ...

  9. VUE.JS 窗口发生变化时，获取当前窗口的高度。

    VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() ...

  10. python的WSGI接口

    WSGI:Web Server Gateway Interface. WSGI是为python语言定义的web服务器和web应用程序或框架之间的一种简单而实用的接口.wsgi是一个web组件的接口规范 ...