forked from bramstein/text-overflow
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexamples.html
89 lines (85 loc) · 8.16 KB
/
examples.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Overflow Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery.text-overflow.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('#default li').textOverflow();
$('#custom li').each(function (index) {
$(this).textOverflow({
str: '... <a href="#' + index + '">read more</a>'
});
});
$('#dynamic li').textOverflow({
autoUpdate: true
});
$('#resize').click(function () {
var d = $('#dynamic');
if (d.width() === 300) {
$('#dynamic').width(500);
} else {
$('#dynamic').width(300);
}
});
});
</script>
<style>
#default, #custom, #dynamic, #fixed, #links {
width: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>jQuery Text Overflow examples</h1>
<p>This first example shows the default settings at work. It just calls the <code>textOverflow</code> method on the list elements without any parameters. Note that container elements and inline elements are properly conserved and lines are truncated after words (i.e. trailing spaces are removed.)</p>
<code>
<pre>
$('#default li').textOverflow();
</pre>
</code>
<ul id="default">
<li>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Aenean quis elit in massa pretium tempus. Curabitur vehicula <em>aliquam massa a pellentesque</em>. Ut ut orci urna, vel pulvinar neque.</li>
<li>Donec diam dolor, <span class="highlight">sollicitudin eu <em>congue eu</em>, consectetur et felis</span>. Fusce est odio, cursus eget feugiat sed, semper eu ante. Nullam quis mauris et turpis laoreet laoreet quis non elit. Nunc elementum laoreet elit, ac porta nunc ullamcorper et. Phasellus ornare dapibus sem, sed posuere eros pellentesque eu. Donec et quam quam. Aliquam rhoncus mollis rutrum.</li>
<li>Cras fringilla, <a href="#">nisl vitae <strong>posuere tincidunt</strong>, libero sem mattis lectus, eget consequat leo dolor ac tortor</a>. Fusce facilisis metus eu odio commodo pulvinar. Ut sit amet ligula sed purus tincidunt tincidunt. Curabitur tempus placerat interdum. Mauris viverra, mauris et luctus malesuada, urna eros scelerisque ante, sed imperdiet velit velit nec augue. Donec arcu ante, tincidunt eget facilisis et, condimentum id magna. Donec ipsum quam, suscipit a ornare quis, vestibulum ut lectus. Fusce ultrices laoreet varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam diam ligula, dapibus eget scelerisque et, congue quis mauris.</li>
<li><a href="#">Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. <strong>Aenean quis</strong> elit in massa pretium tempus. Curabitur vehicula aliquam massa a pellentesque. Ut ut orci urna, vel pulvinar neque.</a></li>
<li><a href="#">Donec diam dolor, sollicitudin eu congue eu, consectetur et felis. Fusce est odio, cursus eget feugiat sed, semper eu ante. Nullam quis mauris et turpis laoreet laoreet quis non elit. Nunc elementum laoreet elit, ac porta nunc ullamcorper et. Phasellus ornare dapibus sem, sed posuere eros pellentesque eu. Donec et quam quam. Aliquam rhoncus mollis rutrum.</a></li>
<li><a href="#">Cras fringilla, nisl vitae posuere tincidunt, libero sem mattis lectus, eget consequat leo dolor ac tortor. Fusce facilisis metus eu odio commodo pulvinar. Ut sit amet ligula sed purus tincidunt tincidunt. Curabitur tempus placerat interdum. Mauris viverra, mauris et luctus malesuada, urna eros scelerisque ante, sed imperdiet velit velit nec augue. Donec arcu ante, tincidunt eget facilisis et, condimentum id magna. Donec ipsum quam, suscipit a ornare quis, vestibulum ut lectus. Fusce ultrices laoreet varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam diam ligula, dapibus eget scelerisque et, congue quis mauris.</a></li>
</ul>
<p>The second example shows how custom strings can be used for clipping. Note that the string contains dynamically generated HTML code.
<code>
<pre>
$('#custom li').each(function (index) {
$(this).textOverflow({
str: '... <a href="#' + index + '">read more</a>'
});
});
</pre>
</code>
<ul id="custom">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis elit in massa pretium tempus. Curabitur vehicula aliquam massa a pellentesque. Ut ut orci urna, vel pulvinar neque.</li>
<li>Donec diam dolor, sollicitudin eu congue eu, consectetur et felis. Fusce est odio, cursus eget feugiat sed, semper eu ante. Nullam quis mauris et turpis laoreet laoreet quis non elit. Nunc elementum laoreet elit, ac porta nunc ullamcorper et. Phasellus ornare dapibus sem, sed posuere eros pellentesque eu. Donec et quam quam. Aliquam rhoncus mollis rutrum.</li>
<li>Cras fringilla, nisl vitae posuere tincidunt, libero sem mattis lectus, eget consequat leo dolor ac tortor. Fusce facilisis metus eu odio commodo pulvinar. Ut sit amet ligula sed purus tincidunt tincidunt. Curabitur tempus placerat interdum. Mauris viverra, mauris et luctus malesuada, urna eros scelerisque ante, sed imperdiet velit velit nec augue. Donec arcu ante, tincidunt eget facilisis et, condimentum id magna. Donec ipsum quam, suscipit a ornare quis, vestibulum ut lectus. Fusce ultrices laoreet varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam diam ligula, dapibus eget scelerisque et, congue quis mauris.</li>
</ul>
<p>The next example uses the autoUpdate parameter to the <code>textOverflow</code> method to automatically update the clipping when the parent container is resized. You can try this out by pressing the "Resize parent" button (code for this is not shown.)</p>
<code>
<pre>
$('#dynamic li').textOverflow({
autoUpdate: true
});
</pre>
</code>
<p>It passes <code>null</code> as the first parameter, indicating we wish to use the default value for clipping (the ellipsis character.)</p>
<button id="resize">Resize parent</button>
<ul id="dynamic">
<li>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Aenean quis elit in massa pretium tempus. Curabitur vehicula <em>aliquam massa a pellentesque</em>. Ut ut orci urna, vel pulvinar neque.</li>
<li>Donec diam dolor, <span class="highlight">sollicitudin eu <em>congue eu</em>, consectetur et felis</span>. Fusce est odio, cursus eget feugiat sed, semper eu ante. Nullam quis mauris et turpis laoreet laoreet quis non elit. Nunc elementum laoreet elit, ac porta nunc ullamcorper et. Phasellus ornare dapibus sem, sed posuere eros pellentesque eu. Donec et quam quam. Aliquam rhoncus mollis rutrum.</li>
<li>Cras fringilla, <a href="#">nisl vitae <strong>posuere tincidunt</strong>, libero sem mattis lectus, eget consequat leo dolor ac tortor</a>. Fusce facilisis metus eu odio commodo pulvinar. Ut sit amet ligula sed purus tincidunt tincidunt. Curabitur tempus placerat interdum. Mauris viverra, mauris et luctus malesuada, urna eros scelerisque ante, sed imperdiet velit velit nec augue. Donec arcu ante, tincidunt eget facilisis et, condimentum id magna. Donec ipsum quam, suscipit a ornare quis, vestibulum ut lectus. Fusce ultrices laoreet varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam diam ligula, dapibus eget scelerisque et, congue quis mauris.</li>
</ul>
<h2>More information & details</h2>
<p>More details and API documentation can be found on the <a href="http://www.bramstein.com/projects/text-overflow/">jQuery text overflow plugin website</a>.</p>
</body>
</html>