-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
134 lines (120 loc) · 4.03 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ellipsis.js - Pure Javascript Library to handle multilines ellipsis</title>
<style>
body {
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
font-size: 14px;
font-weight: 400;
line-height: 16px;
}
section {
margin-left: 25vw;
margin-bottom:20px;
}
article {
width: 50vw;
margin-bottom:30px;
}
.title{
font-size: 18px;
font-weight: 500;
line-height: 20px;
}
section .title{
width: 50vw;
}
header .title{
font-size: 22px;
font-weight: 600;
line-height: 24px;
}
header {
margin-top: 40px;
margin-bottom: 40px;
width:100vw;
text-align:center;
}
footer {
width:90vw;
margin-left: 5vw;
text-align:center;
}
span {
font-style: oblique;
}
.normal{
line-height: normal;
font-size: 10px;
width: 30vw;
margin-left:10vw;
}
</style>
</head>
<body>
<header>
<h1 class="title">Ellipsis.js - Pure Javascript Library to handle multilines ellipsis</h1>
</header>
<section>
<h2 class="title">Simple Text Block</h2>
<article class="clamp article-only-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet ullamcorper pharetra. Fusce facilisis odio eu leo laoreet aliquet vitae vitae nibh.
Duis quis quam vestibulum, faucibus eros sed, gravida odio. Mauris sed tincidunt eros. Nunc varius quis enim quis dictum.
Vivamus sed arcu mi. Nam semper cursus augue nec pulvinar. Integer ac justo laoreet, condimentum nunc non, luctus mi.
</article>
<h2 class="title">Complex Text Block (with a, span and b elements)</h2>
<article class="clamp article-text-and-childs">
Lorem <b>ipsum</b> dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Vivamus laoreet <span>ullamcorper</span> pharetra.
Fusce <b>facilisis</b> odio eu <a href="#">leo</a> laoreet aliquet vitae <a href="#">vitae nibh.</a> Duis quis quam vestibulum,
<span>faucibus eros sed, gravida odio.</span> Mauris sed tincidunt eros. <a href="#">Nunc varius quis enim quis</a> dictum.
Vivamus sed arcu mi. <a href="#">Nam semper cursus</a> augue nec pulvinar. <b>Integer ac justo laoreet</a>, condimentum nunc non, luctus mi.
</article>
<h2 class="title">Block with 'normal' line-height property</h2>
<article class="normal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet ullamcorper pharetra. Fusce facilisis odio eu leo laoreet aliquet vitae vitae nibh.
Duis quis quam vestibulum, faucibus eros sed, gravida odio. Mauris sed tincidunt eros. Nunc varius quis enim quis dictum.
Vivamus sed arcu mi. Nam semper cursus augue nec pulvinar.
</article>
</section>
<section>
<h2 class="title">Demo Code</h2>
<pre>
<script src="ellipsis.min.js"></script>
<script type="text/javascript">
Ellipsis({
class: '.title',
lines: 1
}); //specific conf on titles
Ellipsis({
class: '.normal',
lines: 3,
portrait: 1
}) //different maximum lines in portrait/landscape
Ellipsis({
break_word: false
}); //standard usage but we don't want the ellipsis to break words
</script>
</pre>
</section>
<footer>
<p><a href="https://github.com/glinford/ellipsis.js">Documentation</a> | <a href="https://github.com/glinford/ellipsis.js">Github</a> | Build by <a href="https://github.com/glinford/ellipsis.js">@glinford</a></p>
<script src="ellipsis.js"></script>
<script type="text/javascript">
Ellipsis({
className: '.title',
lines: 1
}); //specific conf on titles
Ellipsis({
className: '.normal',
lines: 3,
portrait: 1
}); //different maximum lines in portrait/landscape
Ellipsis({
break_word: false
}); //standard usage but we don't want the ellipsis to break words
</script>
</footer>
</body>
</html>