Download raw (7.9 KB)
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <meta name="author" content="www.frebsite.nl" /> <title>dotdotdot, advanced cross-browser ellipsis for multiple line content.</title> <script type="text/javascript" language="javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" language="javascript" src="jquery.dotdotdot.min.js"></script> <script type="text/javascript" language="javascript"> $(function() { $('#dot1').dotdotdot(); $('#dot2').dotdotdot(); $('#dot3').dotdotdot({ after: 'a.more' }); $('#dot4').dotdotdot({ watch: 'window' }); $('#dot5 .pathname').each(function() { var path = $(this).html().split( '/' ); if ( path.length > 1 ) { var name = path.pop(); $(this).html( path.join( '/' ) + '<span class="filename">/' + name + '</span>' ); $(this).dotdotdot({ after: '.filename', wrap: 'letter' }); } }); }); </script> <style type="text/css" media="all"> html, body { padding: 0; margin: 0; height: 100%; } body, div, p { font-family: Arial, Helvetica, Verdana; color: #333; -webkit-text-size-adjust: none; } body { background-color: #f3f3f3; } a, a:link, a:active, a:visited { color: black; text-decoration: underline; } a:hover { color: #9E1F63; } #wrapper { background-color: #fff; width: 600px; padding: 50px 50px 0 50px; margin: 0 auto; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; } #intro { margin-bottom: 60px; } #intro p { font-size: 18px; } div.example { padding: 0 0 150px 0; } div.example:after { content: ''; display: block; clear: both; } div.example p { margin: 0 0 10px 0; } div.l { width: 275px; float: left; } div.r { width: 275px; float: right; } div.box { border: 1px solid #ccc; height: 160px; padding: 15px 20px 10px 20px; /* overflow: hidden; */ } div.resize { padding-bottom: 250px; } div.resize div.box { position: absolute; width: 40%; height: 100px; } div.resize div.box.before { right: 50%; margin-right: 10px; } div.resize div.box.after { left: 50%; margin-left: 10px; } div.box.before { background-color: #ffeeee; } div.box.after { background-color: #eeffee; } p.before { color: #990000; } p.after { color: #006600; } div.box.pathname { height: auto; } .pathname { height: 25px; } </style> </head> <body> <br /> <br /> <div id="wrapper"> <div id="intro"> <h1>jQuery.dotdotdot</h1> <p>Advanced cross-browser ellipsis for multiple line content.<br /> Demo's and documentation: <a href="http://dotdotdot.frebsite.nl" target="_blank">dotdotdot.frebsite.nl</a></p> </div> <div class="example"> <p><strong>Text only:</strong></p> <div class="l"> <p class="before">before:</p> <div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </div> <div class="r"> <p class="after">after:</p> <div class="box after" id="dot1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </div> </div> <div class="example"> <p><strong>Text with markup:</strong></p> <div class="l"> <p class="before">before:</p> <div class="box before"> <p><em>Lorem Ipsum</em> is simply dummy text of the <strong>printing</strong> and <strong>typesetting industry</strong>.</p> <p><em>Lorem Ipsum</em> has been the industry's standard dummy text ever since <strong>the 1500s</strong>, when an unknown printer took a <em>galley of type</em> and scrambled it to make a type specimen book.</p> <p>It has survived not only <strong>five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>.</p> </div> </div> <div class="r"> <p class="after">after:</p> <div class="box after" id="dot2"> <p><em>Lorem Ipsum</em> is simply dummy text of the <strong>printing</strong> and <strong>typesetting industry</strong>.</p> <p><em>Lorem Ipsum</em> has been the industry's standard dummy text ever since <strong>the 1500s</strong>, when an unknown printer took a <em>galley of type</em> and scrambled it to make a type specimen book.</p> <p>It has survived not only <strong>five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>.</p> </div> </div> </div> <div class="example"> <p><strong>With an "after"-element:</strong></p> <div class="l"> <p class="before">before:</p> <div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="#" class="readmore">Read more »</a></div> </div> <div class="r"> <p class="after">after:</p> <div class="box after" id="dot3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="#" class="more">Read more »</a></div> </div> </div> <div class="example resize"> <p><strong>Updating onWindowResize:</strong></p> <div class="l"> <p class="before">before:</p> <div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </div> <div class="r"> <p class="after">after:</p> <div class="box after" id="dot4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </div> </div> <div class="example"> <p><strong>Truncate readable pathnames</strong></p> <div class="l"> <p class="before">before:</p> <div class="box before pathname"> <div class="pathname">www.website.com/file.html</div> <div class="pathname">www.website.com/with/a/long/pathname/file.html</div> </div> </div> <div class="r"> <p class="after">after:</p> <div class="box after pathname" id="dot5"> <div class="pathname">www.website.com/file.html</div> <div class="pathname">www.website.com/with/a/long/pathname/file.html</div> </div> </div> </div> </div> <br /> <br /> </body> </html>