-
Notifications
You must be signed in to change notification settings - Fork 323
/
word_break.rml
53 lines (51 loc) · 1.15 KB
/
word_break.rml
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
<rml>
<head>
<title>Word-break property</title>
<link type="text/rcss" href="../style.rcss"/>
<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property" />
<meta name="Description" content="Word-break property." />
<style>
body {
background: #ddd;
color: #444;
}
h1 {
margin-top: 0.3em;
font-size: 1.1em;
}
p {
color: #45e;
}
.box {
width: 60px;
border: 2px #aaa;
}
.zero {
width: 0px;
}
.break-all {
word-break: break-all;
}
.break-word {
word-break: break-word;
}
</style>
</head>
<body>
<h1>Fixed-width box</h1>
<p>word-break: normal</p>
<div class="box">A very veeery veeeeeeeeeeeery long word.</div>
<p>word-break: break-all</p>
<div class="box break-all">A very veeery veeeeeeeeeeeery long word.</div>
<p>word-break: break-word</p>
<div class="box break-word">A very veeery veeeeeeeeeeeery long word.</div>
<hr/>
<h1>Zero-width box</h1>
<p>word-break: normal</p>
<div class="box zero">A WORD</div>
<p>word-break: break-all</p>
<div class="box zero break-all">A WORD</div>
<p>word-break: break-word</p>
<div class="box zero break-word">A WORD</div>
</body>
</rml>