在项目汇总，我们有这样的需求，如果内容多了，就自动省略，自动添加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. #Leetcode# 373. Find K Pairs with Smallest Sums

    https://leetcode.com/problems/find-k-pairs-with-smallest-sums/ You are given two integer arrays nums ...

  2. linux 修改终端颜色

    要想修改终端的颜色,可以使用修改PS1环境变量的方式,也可以通过命令setterm来进行设置. 一.PS1 转自:修改linux终端命令行颜色 1.PS1 要修改linux终端命令行颜色,我们需要用到 ...

  3. Alpha、伪Beta 发布后，夏一鸣的个人感想与体会

    伪Beta发布在4月15日拉开了帷幕,夏一鸣代表OneZero团队上台进行了Account的发布.产品发布成功,但依然存在问题和不足.以下就Alpha.伪Beta 发布谈一谈我自己(夏一鸣)的想法. ...

  4. html5 & input & accept attribute

    html5 & input & accept attribute html input accept attribute https://www.w3schools.com/TAGS/ ...

  5. 【设计模式】—— 命令模式Commond

    前言:[模式总览]——————————by xingoo 模式意图 将一个请求封装成一个对象,从而对这个命令执行撤销.重做等操作. 典型的Eclipse开发中,编辑器的操作就需要用到这个模式,比如Un ...

  6. linux下彻底卸载mysql 图解教程

    linux下彻底卸载mysql 图解教程 1.查找以前是否装有mysql 命令:rpm -qa|grep -i mysql可以看到如下图的所示: 说明之前安装了:MySQL-client-5.5.25 ...

  7. 【转】如何解决使用keil下载或者调试程序是提示的“Invalid ROM Table”信息！

    在将Discovery的工程移植到Mini-STM32F4x9BI开发板时,使用ULINK2下载程序可能会出现如下图所示的“Invalid ROM Table”这个错误. 可能原因是使用Mini-ST ...

  8. Spring Boot整合MyBatis（使用Spring Tool Suite工具）

    1. 创建Spring Boot项目 通过Spring Tool Suite的Spring Starter Project对话框,其实是把项目生成的工作委托http://start.spring.io ...

  9. ORACLE递归查询（适用于ID,PARENTID结构数据表）

    Oracle 树操作(select…start with…connect by…prior) oracle树查询的最重要的就是select…start with…connect by…prior语法了 ...

  10. HDU 1524 树上无环博弈 暴力SG

    一个拓扑结构的图,给定n个棋的位置,每次可以沿边走,不能操作者输. 已经给出了拓扑图了,对于每个棋子找一遍SG最后SG和就行了. /** @Date : 2017-10-13 20:08:45 * @ ...