1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html lang="ja">
3 <head>
4 <title>CSS Test: word-break - keep-all - basic cases</title>
5 <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp">
6 <link rel="help" title="CSS Text Level 3: 5.2. Word Breaking Rules: the ‘word-break’ property" href="http://www.w3.org/TR/css-text-3/#word-break">
7 <link rel="match" href="reference/word-break-keep-all-004-ref.htm">
8 <meta name="flags" content="font">
9 <meta name="assert" content="Block characters can no longer create implied break points.">
10 <style type="text/css">
11
12 .test span {
13 word-break: keep-all;
14 }
15 /* the CSS below is not part of the test */
16 p.test, p.control {
17 border: 1px solid gray;
18 color: blue;
19 font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
20 width: 10em;
21 }
22 span.attention {
23 color: red;
24 }
25 span.no_wrap {
26 white-space: nowrap;
27 }
28
29 </style>
30 </head>
31 <body>
32 <p>
33 Test passes if each pair of upper and lower text in the square box is identical.
34 </p>
35 <hr>
36 <p class="test">
37 <span>Filler Text Filler Text Filler Text</span>
38 </p>
39 <p class="control">
40 <span>Filler Text Filler<br>Text Filler Text</span>
41 </p>
42 <hr>
43 <p class="test">
44 <span>満たすための文字 Filler Text</span>
45 </p>
46 <p class="control">
47 <span>満たすための文字<br>Filler Text</span>
48 </p>
49 <hr>
50 <p class="test">
51 <span>満たすための文字満たすための文字</span>
52 </p>
53 <p class="control">
54 <span class="no_wrap">満たすための文字満たすための文字</span>
55 </p>
56 <hr>
57 <p>
58 <span class="attention">* You will need a Japanese font.</span><br>
59 If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
60 </p>
61 </body>
62 </html>