-
Notifications
You must be signed in to change notification settings - Fork 0
/
shave.html
27 lines (25 loc) · 13.6 KB
/
shave.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<script src="shave.min.js"></script>
</head>
<body>
<header>
<h1><a href="https://dollarshaveclub.github.io/shave/" target="_blank">Shave</a></h1>
<h2></h2>
</header>
<main>
<div class="ellipsis-clamp"><p class="ellipsis-overflow">Consectetur id enim dolor aute ipsum cupidatat.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Magna veniam ea non sint duis sunt ex velit.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Eu nostrud pariatur minim elit voluptate aliquip consequat commodo id officia cupidatat qui amet.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Id et proident qui ea excepteur voluptate dolore quis laborum elit eiusmod ipsum.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Esse excepteur dolor occaecat sit veniam duis in ipsum ut do anim anim quis.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Adipisicing irure anim fugiat est et in incididunt anim amet mollit cupidatat sunt.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Consectetur est ullamco ex duis anim culpa nulla dolore officia.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Pariatur incididunt fugiat velit et sunt id occaecat.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Amet fugiat fugiat velit mollit mollit dolor sint elit officia consectetur culpa cupidatat nulla ut.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Voluptate consectetur deserunt sunt ea ea fugiat labore amet irure irure irure.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Excepteur ipsum proident tempor veniam pariatur amet.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Nostrud anim velit sunt nulla consequat.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Est exercitation ipsum officia elit aute incididunt id ad.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Fugiat non deserunt cillum esse.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Culpa eu nulla labore incididunt officia eu nostrud ea velit.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Amet et culpa in aliqua pariatur laboris amet.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Elit tempor culpa enim nisi id in adipisicing laborum consequat.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Cillum veniam sint cillum tempor ullamco.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ipsum cupidatat est sit aliqua deserunt pariatur eiusmod ex sit est adipisicing esse ullamco.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Aute esse non et esse sit anim exercitation amet exercitation ea.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Eiusmod ex aliqua commodo irure enim amet eu exercitation non aute.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Lorem anim ex sit ad in commodo ullamco consectetur quis cupidatat qui ut sit nostrud.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Duis elit ullamco elit dolor ex ea officia.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Et ex cupidatat nostrud anim deserunt aute.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Excepteur cupidatat adipisicing nulla eiusmod minim.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Reprehenderit Lorem voluptate consectetur ut aliquip.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Veniam do id ut do.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Aliqua quis excepteur ut sit eu velit laboris.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Cupidatat officia commodo minim dolor tempor labore ut elit eu cupidatat nisi.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Culpa laboris in dolor Lorem fugiat ad velit tempor ea duis sit anim sint.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Lorem nulla sint labore duis occaecat eu exercitation quis commodo dolor.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Magna labore non aliquip non eu mollit culpa officia eu magna.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Eu aliqua sunt duis laboris voluptate ea ullamco tempor ullamco voluptate ut eiusmod.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Magna nostrud aliquip exercitation eiusmod anim reprehenderit do laboris reprehenderit ullamco laborum elit enim.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Mollit Lorem minim ullamco deserunt cillum elit mollit minim.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Consequat ullamco pariatur consequat esse eu ullamco.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Mollit ullamco ut ipsum est reprehenderit laborum eiusmod est nulla.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Commodo ullamco veniam esse deserunt fugiat est quis.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Dolor quis velit elit voluptate.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Cillum officia dolore sint laborum id laborum fugiat est labore cupidatat aliquip cillum.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Est laboris voluptate excepteur deserunt ullamco consectetur nisi ea commodo velit consectetur.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Est amet velit excepteur officia pariatur ullamco voluptate veniam officia eu consequat non veniam.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Adipisicing id quis proident reprehenderit Lorem tempor et.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Veniam amet officia veniam culpa non ad magna aute labore anim cupidatat.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Labore incididunt mollit velit ex ex cillum amet minim tempor Lorem ullamco.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Irure laborum aliqua minim incididunt.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Aliqua consequat elit velit amet.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Incididunt irure incididunt adipisicing laborum aliqua eiusmod do excepteur voluptate duis est amet amet.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">In ut nostrud esse veniam sunt tempor.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Sunt ea magna dolore elit.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Culpa magna eu ad laboris eu ullamco occaecat nulla excepteur irure laborum anim.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Voluptate mollit esse proident dolore enim esse cillum minim labore eiusmod laboris commodo velit labore.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ad ea est nulla esse.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Commodo culpa excepteur irure aliquip aute aute sint.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ex fugiat minim exercitation et.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Non qui irure est irure excepteur ipsum deserunt laborum ex.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Do quis consequat duis dolor laborum dolore amet ea laboris minim.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Quis tempor amet eu commodo cupidatat cupidatat ex ad reprehenderit sint.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Tempor minim culpa irure occaecat eu do deserunt quis do irure.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Aliqua anim do irure dolor proident culpa pariatur officia excepteur anim magna mollit.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Eiusmod ea ex qui pariatur.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Aliqua veniam sunt adipisicing est.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Velit dolore aliqua minim ullamco ullamco enim.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Tempor fugiat amet sit in ullamco.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Cillum est sunt adipisicing nostrud aliquip est quis amet sit.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Irure eiusmod magna sit reprehenderit dolor duis enim ea Lorem fugiat incididunt veniam ipsum qui.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Deserunt in dolore ut quis Lorem anim labore sit aliqua.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Veniam esse adipisicing elit nostrud commodo fugiat in.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Id excepteur nulla mollit laborum proident eiusmod eu anim eiusmod velit ipsum amet duis.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Est velit excepteur commodo tempor consequat pariatur ipsum aute aliquip in excepteur voluptate reprehenderit.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ea nostrud laboris et eiusmod.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Tempor consectetur amet Lorem et sunt.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Laborum laborum ut pariatur consequat do Lorem incididunt duis.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Amet exercitation non pariatur sint adipisicing Lorem.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Magna laborum ex aliquip Lorem esse nostrud adipisicing veniam deserunt sint ullamco nostrud irure esse.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Excepteur exercitation proident in veniam dolore anim reprehenderit velit laborum sit aliqua est dolor non.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Pariatur nostrud officia consectetur nostrud deserunt esse nulla sunt irure aute pariatur proident et laboris.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Officia dolore cupidatat dolore sit ullamco est aliquip nostrud quis sint qui duis.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Nulla reprehenderit incididunt cillum aliquip consectetur aute est tempor.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Laborum non deserunt in tempor aute magna laborum duis amet reprehenderit ipsum exercitation consectetur.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Officia ullamco adipisicing enim labore cupidatat esse labore pariatur reprehenderit cillum aute velit proident.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Culpa adipisicing magna nisi veniam nostrud incididunt.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Lorem tempor aute proident ut incididunt consequat laboris anim velit sunt mollit.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Id nisi in qui ea culpa fugiat.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Pariatur fugiat ullamco duis cupidatat sint cillum ea non incididunt elit minim ipsum aliqua ex.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Nisi culpa est dolore incididunt consequat esse.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Commodo duis magna amet labore aliqua ullamco.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ex dolor mollit deserunt tempor non laborum ullamco.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Excepteur ut ut nulla voluptate consectetur irure sint aliquip ullamco.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Anim velit laboris mollit laboris reprehenderit non eu ipsum excepteur enim.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ullamco fugiat dolore fugiat commodo aliquip sit.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ipsum nostrud mollit laboris veniam in et.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ipsum consequat officia consequat pariatur excepteur est irure adipisicing amet pariatur laboris sint esse.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ea minim elit fugiat eiusmod deserunt irure ad irure laboris.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Lorem nulla adipisicing ut excepteur laboris duis consectetur nisi nulla exercitation mollit irure ad ad.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Et velit id id qui aliqua id aute eu laboris reprehenderit est excepteur reprehenderit dolore.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ex pariatur nulla excepteur adipisicing commodo labore ad excepteur ut commodo.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Ad aliqua duis voluptate laborum laborum eu in ipsum velit voluptate.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Lorem eu ad magna ea nisi elit exercitation in adipisicing cillum non ipsum.</p></div><div class="ellipsis-clamp"><p class="ellipsis-overflow">Dolore quis eu nulla ut consectetur.</p></div>
</main>
<script>
var start = Date.now();
shave('.ellipsis-overflow', '30px');
var end = Date.now();
var elapsed = end - start;
var ellipsisClamps = document.querySelectorAll('.ellipsis-clamp');
document.querySelector('h2').innerHTML = `took ${elapsed} ms to clamp ${ellipsisClamps.length} paragraphs`;
</script>
</body>
</html>