OLD | NEW |
1 <style> | 1 <style> |
2 html { | |
3 -webkit-locale: "en_US"; | |
4 } | |
5 | |
6 .text-box { | 2 .text-box { |
7 border: solid; | 3 border: solid; |
8 padding: 4px; | 4 padding: 4px; |
9 width: 330px; | 5 width: 110px; |
10 font-size: 18px; | 6 font-size: 18px; |
11 text-align: justify; | 7 text-align: justify; |
12 -webkit-hyphens: auto; | |
13 } | |
14 | |
15 .float { | |
16 width: 75px; | |
17 height: 5em; | |
18 background-color: aliceblue; | |
19 float: right; | |
20 margin-left: 10px; | |
21 } | 8 } |
22 | 9 |
23 .hyphenate-character-auto { | 10 .hyphenate-character-auto { |
24 -webkit-hyphenate-character: auto; | 11 -webkit-hyphenate-character: auto; |
25 } | 12 } |
26 | 13 |
27 .hyphenate-character-bullet { | 14 .hyphenate-character-bullet { |
28 -webkit-hyphenate-character: "\2022"; | 15 -webkit-hyphenate-character: "\2022"; |
29 } | 16 } |
30 | 17 |
31 .hyphenate-character-tilde-dot { | 18 .hyphenate-character-tilde-dot { |
32 -webkit-hyphenate-character: "\B7~"; | 19 -webkit-hyphenate-character: "\B7~"; |
33 } | 20 } |
34 | 21 |
35 .test { | 22 .test { |
36 float: left; | 23 float: left; |
37 margin: 0 4px; | 24 margin: 0 4px; |
38 } | 25 } |
39 </style> | 26 </style> |
40 <div class="test"> | 27 <div class="test"> |
41 <p>The initial value (should be like <tt>auto</tt>)</p> | 28 <p>The initial value (should be like <tt>auto</tt>)</p> |
42 <div class="text-box"> | 29 <div class="text-box"> |
43 <div class="float"></div> | 30 antidisestab­lishment­arianism |
44 The chief difficulty Alice found at first was in managing her | |
45 flamingo: she succeeded in getting its body tucked away, | |
46 comfortably enough, under her arm, with its legs hanging down, | |
47 but generally, just as she had got its neck nicely straightened | |
48 out, and was going to give the hedgehog a blow with its head, it | |
49 would twist itself round and look up in her face… | |
50 </div> | 31 </div> |
51 </div> | 32 </div> |
52 <div class="test"> | 33 <div class="test"> |
53 <p>The default (<tt>hyphenate-character: auto</tt>)</p> | 34 <p>The default (<tt>hyphenate-character: auto</tt>)</p> |
54 <div class="text-box hyphenate-character-auto"> | 35 <div class="text-box hyphenate-character-auto"> |
55 <div class="float"></div> | 36 antidisestab­lishment­arianism |
56 The chief difficulty Alice found at first was in managing her | |
57 flamingo: she succeeded in getting its body tucked away, | |
58 comfortably enough, under her arm, with its legs hanging down, | |
59 but generally, just as she had got its neck nicely straightened | |
60 out, and was going to give the hedgehog a blow with its head, it | |
61 would twist itself round and look up in her face… | |
62 </div> | 37 </div> |
63 </div> | 38 </div> |
64 <div class="test"> | 39 <div class="test"> |
65 <p>Bullet (<tt>hyphenate-character: "\2022"</tt>)</p> | 40 <p>Bullet (<tt>hyphenate-character: "\2022"</tt>)</p> |
66 <div class="text-box hyphenate-character-bullet"> | 41 <div class="text-box hyphenate-character-bullet"> |
67 <div class="float"></div> | 42 antidisestab­lishment­arianism |
68 The chief difficulty Alice found at first was in managing her | |
69 flamingo: she succeeded in getting its body tucked away, | |
70 comfortably enough, under her arm, with its legs hanging down, | |
71 but generally, just as she had got its neck nicely straightened | |
72 out, and was going to give the hedgehog a blow with its head, it | |
73 would twist itself round and look up in her face… | |
74 </div> | 43 </div> |
75 </div> | 44 </div> |
76 <div class="test"> | 45 <div class="test"> |
77 <p>Middle dot and tilde (<tt>hyphenate-character: "\B7~"</tt>)</p> | 46 <p>Middle dot and tilde (<tt>hyphenate-character: "\B7~"</tt>)</p> |
78 <div class="text-box hyphenate-character-tilde-dot"> | 47 <div class="text-box hyphenate-character-tilde-dot"> |
79 <div class="float"></div> | 48 antidisestab­lishment­arianism |
80 The chief difficulty Alice found at first was in managing her | |
81 flamingo: she succeeded in getting its body tucked away, | |
82 comfortably enough, under her arm, with its legs hanging down, | |
83 but generally, just as she had got its neck nicely straightened | |
84 out, and was going to give the hedgehog a blow with its head, it | |
85 would twist itself round and look up in her face… | |
86 </div> | 49 </div> |
87 </div> | 50 </div> |
OLD | NEW |