js和css实现内容超过边框,就自动省略,自动添加title

Posted zhaobao1830

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js和css实现内容超过边框,就自动省略,自动添加title相关的知识,希望对你有一定的参考价值。

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

这个需要判断判断俩个值,一个是width(),一个是scrollWidth,

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

来知道内容是否超过边框

例:

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="ie=edge">
 6   <title>Title</title>
 7   <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-sacle=1,user-scalable=no">
 8   <script type="text/javascript" src="../jquery-3.1.1.js"></script>
 9   <style>
10     .test1{
11       width: 200px;
12       height: 20px;
13       overflow: hidden;
14       text-overflow: ellipsis;
15       white-space: nowrap;
16     }
17   </style>
18 </head>
19 <body>
20    <div>
21      <div class="test1">阿尔瓦尔</div>
22      <div class="test1">阿尔瓦尔方式顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多</div>
23    </div>
24    <script>
25      $(function () {
26        console.log($(".test1").eq(1).width())
27        console.log($(".test1").eq(1)[0].scrollWidth)
28        for(var i = 0;i<$(".test1").length;i++){
29          if($(".test1").eq(i).width() < $(".test1").eq(i)[0].scrollWidth){
30            $(".test1").eq(i).attr("title",$(".test1").eq(i).text())
31          }
32        }
33      })
34    </script>
35 </body>
36 </html>

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

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

例:

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="ie=edge">
 6   <title>Title</title>
 7   <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-sacle=1,user-scalable=no">
 8   <script type="text/javascript" src="../jquery-3.1.1.js"></script>
 9   <style>
10     table{
11       width: 1080px;
12       table-layout: fixed;
13       border-collapse: collapse;
14       margin: 0 auto;
15     }
16     thead{
17       width: auto;
18       font-size: 14px;
19       text-align: center;
20       background-color: #777777;
21     }
22     thead tr,thead th{
23       border: 1px solid #dddddd;
24       border-left: none !important;
25       color: #ffffff;
26       height: 50px;
27       font-size: 14px;
28     }
29     thead tr img,tbody td img{
30       width: 14px;
31       height: 14px;
32       cursor: pointer;
33     }
34 
35     tbody{
36       width: auto;
37       min-width: 1070px;
38       font-size: 14px;
39       text-align: center;
40       border-bottom: 1px solid #dddddd;
41       background-color: #ffffff;
42     }
43     tbody tr,tbody td{
44       border-left: 1px solid #dddddd;
45       border-right: 1px solid #dddddd;
46       height: 67px;
47       color: #464646;
48     }
49     tbody td{
50       overflow: hidden;
51       text-overflow: ellipsis;
52       white-space: nowrap;
53     }
54   </style>
55 </head>
56 <body>
57    <table>
58      <tbody>
59        <tr>
60          <td class="test2">我是</td>
61          <td class="test1" width="350">我是1反倒</td>
62          <td>我是2</td>
63        </tr>
64        <tr>
65          <td>我是</td>
66          <td class="test1" width="350">我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所</td>
67          <td>我是2</td>
68        </tr>
69        <tr>
70          <td>我是</td>
71          <td class="test1" width="350">我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所</td>
72          <td>我是2</td>
73        </tr>
74      </tbody>
75    </table>
76    <script>
77      $(function () {
78        // 352是最开始算出来的,当内容很少时,scrollWidth值是352
79        for(var i = 0;i<$(".test1").length;i++){
80          if($(".test1").eq(i)[0].scrollWidth > 352){
81            $(".test1").eq(i).attr("title",$(".test1").eq(i).text())
82          }
83        }
84      })
85    </script>
86 </body>
87 </html>

 

以上是关于js和css实现内容超过边框,就自动省略,自动添加title的主要内容,如果未能解决你的问题,请参考以下文章

css超过两行省略样式不生效

请问用CSS如何控制自动隐藏多余的内容?

js实现字数超出宽度自动显示省略号?

css 文本超出容器长度后自动省略的方法!

css 实现自动添加‘...’省略号,支持多行和单行显示,需要支持webkit的属性可用

Js文本溢出自动添加省略号ellipsis