In the project summary, we have such a requirement, if the content is more, automatically omitted, automatically add title
This needs to judge two values, one is width (), one is ScrollWidth,
In the Div, if the content does not exceed the border, the two values are the same, that is, the width of the CSS settings, if the content exceeds the border, the value of ScrollWidth is greater than width, so we can determine the value of scrollwidth and width
To know if the content is over the border
Cases:
1<! DOCTYPE html>2"ZH">34<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>Ten . test1{ One width:200px; A height:20px; - Overflow:hidden; -text-overflow:ellipsis; thewhite-Space:nowrap; - } -</style> - +<body> -<div> +<divclass="test1"> Alwar </div> A<divclass="test1"> Alwar way Top-top top-top top-top-top top-top top top roof more toto more many more many more many more </div> at</div> -<script> - $ (function () { -Console.log ($ (". Test1"). EQ (1). Width ()) -Console.log ($ (". Test1"). EQ (1)[0].scrollwidth) - for(vari =0; i<$ (". Test1"). length;i++){ in if($(". Test1"). EQ (i). Width () < $ (". Test1"). EQ (i) [0].scrollwidth) { -$(". Test1"). EQ (i). attr ("title",$(". Test1"). EQ (i). Text ()) to } + } - }) the</script> *</body> $In the table, it can not be judged, even if the content does not exceed the border, ScrollWidth will be greater than the width, so we only use scrollwidth on the line, first by calculating the value of ScrollWidth to get content, and then the same judgment
If the current scrollwidth is greater than the value that was previously calculated, it means that the content is over the border
Cases:
1<! DOCTYPE html>2"ZH">34<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>Ten table{ One width:1080px; ATable-layout:fixed; -border-Collapse:collapse; -Margin0Auto; the } - thead{ - Width:auto; -font-size:14px; +text-Align:center; -Background-color: #777777; + } A thead tr,thead th{ at border:1px solid #dddddd; -Border-left:none!important; - color: #ffffff; - height:50px; -font-size:14px; - } in thead TR img,tbody TD img{ - width:14px; to height:14px; + Cursor:pointer; - } the * tbody{ $ Width:auto;Panax Notoginsengmin-width:1070px; -font-size:14px; thetext-Align:center; +border-bottom:1px solid #dddddd; Abackground-color: #ffffff; the } + tbody tr,tbody td{ -border-left:1px solid #dddddd; $border-right:1px solid #dddddd; $ height:67px; -Color: #464646; - } the tbody td{ - Overflow:hidden;Wuyitext-overflow:ellipsis; thewhite-Space:nowrap; - } Wu</style> - About<body> $<table> -<tbody> -<tr> -<tdclass="test2"> I was </td> A<tdclass="test1"Width=" -"> I was 1 instead </td> +<td> I'm 2</td>. the</tr> -<tr> $<td> I was </td> the<tdclass="test1"Width=" -"> I am 1 What I am, what I am, what I am, what I am, what I am, what I am, what I am, and what we are, what we are, what I am, and what we are, and what we are, and what we are, and what we are. the<td> I'm 2</td>. the</tr> the<tr> -<td> I was </td> in<tdclass="test1"Width=" -"> I am 1 What I am, what I am, what I am, what I am, what I am, what I am, what I am, and what we are, what we are, what I am, and what we are, and what we are, and what we are, and what we are. the<td> I'm 2</td>. the</tr> About</tbody> the</table> the<script> the $ (function () { + //352 is the beginning of the calculation, when the content is very small, the ScrollWidth value is 352 - for(vari =0; i<$ (". Test1"). length;i++){ the if($(". Test1"). EQ (i) [0].scrollwidth >352){Bayi$(". Test1"). EQ (i). attr ("title",$(". Test1"). EQ (i). Text ()) the } the } - }) -</script> the</body> theJS and CSS implementation content beyond the borders, automatically omit, automatically add title