-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
84 lines (82 loc) · 7.18 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
<!doctype html>
<html>
<head>
<title>Ellipsed Text Testing</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="./example/index.css">
<script type="text/javascript" src="./lib/ellipsed.js"></script>
</head>
<body>
<a href="https://github.com/nzambello/ellipsed" title="Fork me on GitHub">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<div class="container">
<div class="header-title">
<img src="https://github.com/nzambello/ellipsed/raw/master/logo.svg?sanitize=true" alt="ellipsed logo" />
<h1>Ellipsed Text Testing</h1>
</div>
<div class="tests">
<div class="text">
<p class="aaa">
A a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
a a a a
</p>
</div>
<div class="text">
<p class="lorem-ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>It works with formatted content, too.</strong> Nulla quis lorem ut libero malesuada feugiat. Curabitur
non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit
neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget
tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor
lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
</div>
<div class="text">
<p class="jp">
皮肉にも、捜索のきっかけとなった海王星の軌道の摂動の原因となるには、<strong>冥王星</strong>はあまりにも小さすぎた。19世紀に天文学者が観測した海王星の軌道の計算との食い違いは、海王星の質量の見積もりが正確でなかったためのものだった。いったんそれが分かると、冥王星が非常に暗く、望遠鏡で円盤状に見えないことから、冥王星はローウェルの考えた惑星Xであるという考えに疑問の目が向けられた。ローウェルは1915年に惑星Xの位置を予測しており、これは当時の冥王星の実際の位置にかなり近かった。しかし、アーネスト・ウィリアム・ブラウンはほとんど即座にこれは偶然の一致だと結論付け、この見方は今日でも支持されている。従って、冥王星がピッカリング、ローウェル、ケタカルの予測した領域の近くにあったことがただの偶然に過ぎないことを考慮すると、トンボーが冥王星を発見したことはさらに驚くべきことになる。
</p>
</div>
<div class="text">
<p class="long-word">
Methionylthreonylthreonylglutaminylalanylprolylthreonylphenylalanylthreonylglutaminylprolylleucylglutaminylserylvalylvalylvalylleucylglutamylglycylserylthreonylalanylthreonylphenylalanylglutamylalanylhistidylisoleucylserylglycylphenylalanylprolylvalylprolylglutamylvalylseryltryptophylphenylalanylarginylaspartylglycylglutaminylvalylisoleucylserylthreonylserylthreonylleucylprolylglycylvalylglutaminylisoleucylserylphenylalanylserylaspartylglycylarginylalanyllysylleucylthreonylisoleucylprolylalanylvalylthreonyllysylalanylasparaginylserylglycylarginyltyrosylserylleucyllysylalanylthreonylasparaginylglycylserylglycylglutaminylalanylthreonylserylthreonylalanylglutamylleucylleucylvalyllysylalanylglutamylthreonylalanylprolylprolylasparaginylphenylalanylvalylglutaminylarginylleucylglutaminylserylmethionylthreonylvalylarginylglutaminylglycylserylglutaminylvalylarginylleucyl
</p>
</div>
<div class="text-root">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="controls">
<button class="btn reset" onclick="reset()">Reset</button>
<button class="btn" data-row="1">1</button>
<button class="btn" data-row="2">2</button>
<button class="btn" data-row="3">3</button>
<button class="btn" data-row="4">4</button>
<button class="btn" data-row="5">5</button>
<div class="replace-str">
<label>Replace string</label>
<input type="text" class="replace-str-input" value="..." />
</div>
<div class="responsive">
<label>Responsive</label>
<input type="checkbox" id="responsive-input" />
</div>
</div>
</div>
<div class="view-on-github">
<a class="btn" href="https://github.com/nzambello/ellipsed" title="View on GitHub">
<span>
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub logo">
</span>
<span>View on GitHub</span>
</a>
</div>
<script type="text/javascript" src="./example/index.js"></script>
</body>
</html>