hyphens-auto-inline-010.html (1577B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification (inline)</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> 9 <link rel="match" href="reference/hyphens-auto-inline-010M-ref.html"> 10 <link rel="match" href="reference/hyphens-auto-inline-010H-ref.html"> 11 12 <!-- 13 User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010> 14 when the font has the glyph, or 15 may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d> 16 otherwise. Some fonts will display slightly different glyphs for 17 these code points. Therefore these 2 reference files. 18 The M-ref.html reference file means the hyphen-Minus character U+002D. 19 The H-ref.html reference file means the Hyphen character U+2010. 20 --> 21 22 <meta content="When 'hyphens' is set to 'auto' and applied to an inline element and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved."> 23 24 <style> 25 div 26 { 27 border: black solid 2px; 28 font-family: monospace; 29 font-size: 32px; 30 width: 6ch; 31 } 32 33 span 34 { 35 hyphens: auto; 36 } 37 </style> 38 39 <body lang="en"> 40 41 <div>There are <span>new engines now</span>.</div> 42 43 <!-- 44 Expected result: 45 There 46 are 47 new 48 en- 49 gines 50 now. 51 -->