-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (109 loc) · 5.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebkitLineClamp | JS polyfill CSS property -webkit-line-clamp</title>
<meta name="description" content="JS polyfill CSS property -webkit-line-clamp">
<meta name="keywords" content="webkit-line-clamp, polyfill, css">
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
</head>
<body>
<header class="header">
<h1 class="header__title">Webkit Line Clamp</h1>
<p class="header__description">
<a href="https://travis-ci.org/LeMarck/webkit-line-clamp" class="header__link">
<img src="https://travis-ci.org/LeMarck/webkit-line-clamp.svg?branch=master" alt="Build Status">
</a>
<a href="https://github.com/LeMarck/webkit-line-clamp/blob/master/LICENSE" class="header__link">
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License">
</a>
<a href="https://www.npmjs.com/package/webkit-line-clamp" class="header__link">
<img src="http://img.shields.io/npm/v/webkit-line-clamp.svg?style=flat" alt="NPM Version">
</a>
<a href="https://GitHub.com/LeMarck/webkit-line-clamp/stargazers/" class="header__link">
<img src="https://img.shields.io/github/stars/LeMarck/webkit-line-clamp.svg?style=social" alt="NPM Version">
</a>
</p>
<p class="header__description">
JS polyfill CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp" class="header__link">-webkit-line-clamp</a>
</p>
<figure class="header__bash">
<code>
npm install
<span class="header__npm-package">webkit-line-clamp</span><br>
<span class="header__bash-comment">// or</span><br>
yarn add
<span class="header__npm-package">webkit-line-clamp</span>
</code>
</figure>
</header>
<main class="main">
<section class="section">
<h2 class="section__title">Text element</h2>
<article class="section__container">
<p id="text-element">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Adipisci earum odio qui voluptate voluptatem.
Accusantium, blanditiis dolorum?
Animi aut distinctio doloremque eveniet iusto laborum minus nisi optio, quia quisquam!
Neque.
</p>
</article>
<script>
webkitLineClamp(document.getElementById('text-element'), 3)
</script>
</section>
<section class="section">
<h2 class="section__title">Text container</h2>
<article class="section__container">
<p id="text-container">
<b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit.
<code>Adipisci earum odio qui voluptate voluptatem.</code>
<i>Accusantium, blanditiis dolorum?</i>
<u>Animi aut distinctio doloremque eveniet iusto laborum minus nisi optio, quia quisquam!</u>
<s>Neque</s>.
</p>
</article>
<script>
webkitLineClamp(document.getElementById('text-container'), 3)
</script>
</section>
<section class="section">
<h2 class="section__title">Inline styled text</h2>
<article class="section__container">
<p id="text-inline-style">
<span style="font-weight: bold">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit.
<code style="color: #a00">Adipisci earum odio qui voluptate voluptatem.</code>
<span style="font-style: italic">Accusantium, blanditiis dolorum?</span>
<span style="text-decoration: underline">
Animi aut distinctio doloremque eveniet iusto laborum minus nisi optio, quia quisquam!
</span>
<span style="text-decoration: line-through">Neque</span>.
</p>
</article>
<script>
webkitLineClamp(document.getElementById('text-inline-style'), 3)
</script>
</section>
<section class="section">
<h2 class="section__title">Various text line-height</h2>
<article class="section__container">
<p id="text-line-height">
<b style="line-height: 36px">Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit.
<code style="line-height: 36px">Adipisci earum odio qui voluptate voluptatem.</code>
<i style="line-height: 36px">Accusantium, blanditiis dolorum?</i>
<u style="line-height: 36px">
Animi aut distinctio doloremque eveniet iusto laborum minus nisi optio, quia quisquam!
</u>
<s style="line-height: 36px">Neque</s>.
</p>
</article>
<script>
webkitLineClamp(document.getElementById('text-line-height'), 3)
</script>
</section>
</main>
</body>
</html>