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
|
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=utf8">
<head>
<style>
.testDiv {
height: 308px;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
margin: 0 0 20px 0;
text-align: justify;
text-overflow: ellipsis;
-webkit-writing-mode: vertical-rl;
-webkit-text-orientation: sideways-right;
text-rendering: optimizeLegibility;
}
.rtl {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<h3>Single line</h3>
<div class="testDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Multi line</h3>
<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
</div>
<h3>Containing replaced content</h3>
<div class="testDiv">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Containing replaced content blocking the ellipsis</h3>
<div class="testDiv">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Right-To-Left single line</h3>
<div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Right-To-Left Multi line</h3>
<div class="testDiv rtl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
</div>
<h3>Right-To-Left containing replaced content</h3>
<div class="testDiv rtl">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Right-To-Left containing replaced content blocking the ellipsis</h3>
<div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
</body>
</html>
|
