-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (68 loc) · 6.75 KB
/
index.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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie ie7 lt-ie8 lt-ie9" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie ie8 lt-ie9" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js ie ie9" lang="en"><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ellipsis Plugin</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<nav class="nav-bar ">
<ul class="title-area">
<li class="name">
<h1><a href="http://kanikarphan.github.io/ellipsis/">Ellipsis Plugin</a></h1>
</li>
</ul>
<ul class="link-area inline-list">
<li>
<a href="https://github.com/kanikarphan/ellipsis"><i class="icon-github"></i></a>
</li>
</ul>
</nav>
<section class="row">
<div class="large-6 small-6 columns without">
<h1>Without ellipsis</h1>
<div class="large-12 content">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at tincidunt mauris. Cras ac nibh id ante pharetra egestas. Maecenas pharetra augue ut erat tempor at rhoncus mi tincidunt. Nulla at erat sem. Nam id sem enim, at tincidunt mauris. Nunc ut magna arcu, ac blandit mauris. Nunc in sapien enim. Quisque dui orci, hendrerit id hendrerit eget, tristique ut urna. Donec adipiscing lectus ut velit ullamcorper vehicula. Suspendisse potenti.</p>
</div>
<div class="large-12 content">
<p class="multiline">Aenean eget risus sed urna eleifend fermentum. Mauris iaculis lobortis rhoncus. Aliquam pellentesque, lorem ut commodo consequat, quam dolor varius sem, quis fermentum elit est sit amet neque. Sed mattis mollis sapien, vulputate interdum dui commodo nec. Pellentesque mattis imperdiet massa, ut volutpat diam sodales mattis. Nunc tincidunt facilisis odio adipiscing tempus. Praesent commodo, dui quis molestie euismod, felis orci rutrum erat, a interdum mauris elit vel risus. Praesent scelerisque nulla a eros bibendum varius. Pellentesque faucibus, nisl a lacinia ultricies, arcu odio facilisis nibh, nec pulvinar sapien urna id dolor. Pellentesque consectetur imperdiet ligula vel dignissim. Proin lacinia ante sit amet quam pulvinar adipiscing. Nulla ligula nibh, vestibulum ac sollicitudin id, sollicitudin ac velit. Integer odio libero, interdum ut semper adipiscing, tempus in eros.</p>
</div>
<div class="large-12 content">
<p class="multiline">Nulla sapien urna, pharetra nec hendrerit quis, elementum id purus. Cras vitae lectus lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed nibh eu mi accumsan ultricies. Sed cursus faucibus dignissim. Nam venenatis velit eget ipsum faucibus viverra. Nulla non felis in orci luctus molestie id nec mi. Ut ligula nisi, feugiat id convallis nec, vestibulum in magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla porttitor purus sed arcu vulputate venenatis. Nam quis metus leo, eget cursus ipsum. Praesent semper, libero sit amet viverra auctor, enim nisi vehicula nisl, sit amet fermentum leo urna in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel scelerisque justo. Nullam magna leo, pretium eget luctus eget, aliquam in massa. Mauris quis mi vel est ultrices aliquet.</p>
</div>
</div>
<div class="large-6 small-6 columns">
<h1>With ellipsis</h1>
<div class="large-12 content">
<p class="ellipsis" data-plugin-options='{"href":"http://google.com", "target":"_blank", "title":1}'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at tincidunt mauris. Cras ac nibh id ante pharetra egestas. Maecenas pharetra augue ut erat tempor at rhoncus mi tincidunt. Nulla at erat sem. Nam id sem enim, at tincidunt mauris. Nunc ut magna arcu, ac blandit mauris. Nunc in sapien enim. Quisque dui orci, hendrerit id hendrerit eget, tristique ut urna. Donec adipiscing lectus ut velit ullamcorper vehicula. Suspendisse potenti.</p>
</div>
<div class="large-12 content">
<p class="ellipsis multi" data-plugin-options='{"multiClass":"multi"}'>Aenean eget risus sed urna eleifend fermentum. Mauris iaculis lobortis rhoncus. Aliquam pellentesque, lorem ut commodo consequat, quam dolor varius sem, quis fermentum elit est sit amet neque. Sed mattis mollis sapien, vulputate interdum dui commodo nec. Pellentesque mattis imperdiet massa, ut volutpat diam sodales mattis. Nunc tincidunt facilisis odio adipiscing tempus. Praesent commodo, dui quis molestie euismod, felis orci rutrum erat, a interdum mauris elit vel risus. Praesent scelerisque nulla a eros bibendum varius. Pellentesque faucibus, nisl a lacinia ultricies, arcu odio facilisis nibh, nec pulvinar sapien urna id dolor. Pellentesque consectetur imperdiet ligula vel dignissim. Proin lacinia ante sit amet quam pulvinar adipiscing. Nulla ligula nibh, vestibulum ac sollicitudin id, sollicitudin ac velit. Integer odio libero, interdum ut semper adipiscing, tempus in eros.</p>
</div>
<div class="large-12 content">
<p class="ellipsis multiline callback" data-plugin-options='{"ellipsis":" ...read more","wrap":"span"}'>Nulla sapien urna, pharetra nec hendrerit quis, elementum id purus. Cras vitae lectus lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed nibh eu mi accumsan ultricies. Sed cursus faucibus dignissim. Nam venenatis velit eget ipsum faucibus viverra. Nulla non felis in orci luctus molestie id nec mi. Ut ligula nisi, feugiat id convallis nec, vestibulum in magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla porttitor purus sed arcu vulputate venenatis. Nam quis metus leo, eget cursus ipsum. Praesent semper, libero sit amet viverra auctor, enim nisi vehicula nisl, sit amet fermentum leo urna in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel scelerisque justo. Nullam magna leo, pretium eget luctus eget, aliquam in massa. Mauris quis mi vel est ultrices aliquet.</p>
</div>
</div>
</section>
<footer class="row">
<div class="large-12 columns"><hr>
<ul class="inline-list right">
<li><a href="https://github.com/kanikarphan/ellipsis#ellipsis-plugin">Ellipsis</a></li>
<li><a href="https://github.com/kanikarphan/ellipsis#how-to-use-it">Usage</a></li>
<li><a href="https://github.com/kanikarphan/ellipsis#plugin-options">Options</a></li>
</ul>
</div>
</footer>
<script src="js/ellipsis.js"></script>
<script>
$(document).ready(function() {
$('.ellipsis').ellipsis();
});
</script>
</body>
</html>