-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
168 lines (157 loc) · 8.76 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dotstail</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="./public/theme/css/style.css">
<script type="text/javascript" src="./public/theme/js/dotstail.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand bottom-line blue-line" href="#">dotstail</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active bottom-line pink-line"><a href="#about">About<span class="sr-only">(current)</span></a></li>
<li class="bottom-line orange-line"><a href="#howto">How to Use & Doc</a></li>
<li class="bottom-line green-line"><a href="https://github.com/foxieboy/dotstail">Github</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div id="about" class="section section-about">
<div class="col-md-4 col-sm-5 col-xs-12 content content-left">
<h1 class="content-title">About <strong>dotstail</strong></h1>
<h3>The Problem</h3>
<p>
As we - Front-end Devs all know that Css <code>text-overflow: ellipsis</code> gives result as <strong>a single line only</strong>, which is annoying sometimes when the outcome wanted is a mutiple line ellipsis.
</p>
<h3>What is dotstail?</h3>
<p>
Dotstail is a repo that help you to custom a <i>cross browser</i> <code>text-overflow: ellipsis</code> for <strong>mutiple lines</strong> by using JavaScript and a little CSS line.
</p>
</div>
<div class="col-md-8 col-sm-7 col-xs-12 content-right">
<h1 class="content-title"><strong>dotstail</strong> Demos</h1>
<h3>Resize window to check the result when rezing</h3>
<div class="paragraph">
<img src="theme/images/cactus.png" alt="">
<div class="paragraph-content">
<h3>The 1st Paragraph <small>(lines: 2)</small></h3>
<p class="dotstail-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
</div>
</div>
<div class="paragraph">
<img src="theme/images/landscape.png" alt="">
<div class="paragraph-content">
<h3>The 2nd Paragraph <small>(lines: 3)</small></h3>
<p class="dotstail-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus illum ex, soluta temporibus suscipit rem, vel, animi iste praesentium fugiat quisquam vero non excepturi corporis! Minus deleniti aliquam blanditiis nobis! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Ab recusandae nihil, consequuntur beatae possimus neque, aspernatur molestias itaque sed a maxime! Culpa, hic laboriosam, consequuntur deleniti enim quae nisi amet.
</p>
</div>
</div>
<div class="paragraph">
<img src="theme/images/boat.png" alt="">
<div class="paragraph-content">
<h3>The 3rd Paragraph <small>(lines: 4)</small></h3>
<p class="dotstail-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla voluptate, voluptatem doloremque nobis. At quibusdam dolores culpa voluptatibus consequuntur in sequi laborum minima, voluptas veritatis iusto earum asperiores unde. Id. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Provident quam a perspiciatis, molestias aperiam dolorum ipsam ab facilis qui officia ea recusandae inventore magnam quod quidem vel dolore molestiae! Vel?
</p>
</div>
</div>
</div>
</div>
<div id="howto" class="section section-doc">
<h1 class="section-title">How to use</h1>
<div class="section-body">
<div class="col-sm-6 col-xs-12">
<h3>Set Up</h3>
<p>
Call the action: <br>
<code>dotstail.setDot({</code> Options <code>});</code>
</p>
<h3>Options:</h3>
<p>
Call the element: <br>
<code>'element'</code>: <code>'class/id'</code>
</p>
<p>
Numbers of letter wanted to be cut off <i>(optional)</i>: <br>
<code>'letter'</code>: <code>number</code> <small>(default: 0)</small>
</p>
<p>
Numbers of line wanted to be ellipsis <i>(optional)</i>: <br>
<code>'lines'</code>: <code>number</code> <small>(default: 1)</small>
</p>
<h3><strong>Important</strong> CSS Required</h3>
<p>
Element's line-height needed to work (<i>must be a <code>em</code> unit)</i>: <br>
<code>line-height:</code> <code>...em;</code>
</p>
</div>
<div class="col-sm-6 col-xs-12">
<h3>Examples:</h3>
<h4>Full Option:</h4>
<div class="example">
<p>dotstail.setDot({</p>
<p class="mg-l">'element': '.dotstail-1',</p>
<p class="mg-l">'letter': <span class="number">2</span>,</p>
<p class="mg-l">'lines': <span class="number">2</span></p>
<p>});</p>
</div>
<h4>Remove <code>'letter'</code> Option:</h4>
<div class="example">
<p>dotstail.setDot({</p>
<p class="mg-l">'element': '.dotstail-2',</p>
<p class="mg-l">'lines': <span class="number">3</span></p>
<p>});</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="section thanks">
<div class="author">
Small Project by <a href="https://github.com/foxieboy">Huy Nguyen - Foxieboy.</a>
<p>
<small>Code and documentation copyright 2017, MIT license.</small>
</p>
</div>
</footer>
<script type="text/javascript">
dotstail.setDot({
'element': '.dotstail-1',
'letter': 0,
'lines': 2
});
dotstail.setDot({
'element': '.dotstail-2',
'letter': 0,
'lines': 3
});
dotstail.setDot({
'element': '.dotstail-3',
'lines': 4
});
</script>
</body>
</html>