-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathcss-or-js.html
37 lines (36 loc) · 3.72 KB
/
css-or-js.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
<!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 ($) {
$('.snip li').textOverflow();
});
</script>
<style>
.snip {
width: 500px;
border: 1px solid red;
}
.snip li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul class="snip">
<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>
<li><a href="#">some link</a> | a too long text which should be truncated by this plugin. What it however should not do is remove the space from the start of this sentence.</li>
</ul>
</body>
</html>