float-nowrap-hyphen-rewind-1-ref2.html (920B)
1 <!DOCTYPE html> 2 <style> 3 #container { 4 font-family: monospace; 5 font-size: 20px; 6 hyphens: auto; 7 } 8 9 #container > div { 10 border: 1px solid blue; 11 } 12 13 #container > div > div { 14 border: 1px solid gray; 15 } 16 17 span.wrapper { 18 white-space: pre; 19 } 20 21 .float { 22 float: right; 23 margin-right: -100px; 24 } 25 </style> 26 <div id="container" lang="en-US"> 27 <div style="width: 23ch"> 28 <div> 29 <span class="float">float</span> 30 pppp 31 comprehension<span class="wrapper"> ppp</span> 32 pppp 33 </div> 34 <div> 35 <span class="float">float</span> 36 pppp 37 comprehension<span class="wrapper">[ppp</span> 38 pppp 39 </div> 40 <div> 41 <span class="float">float</span> 42 pppp 43 pppp pppp XXX<span class="wrapper"> ppp</span> 44 pppp 45 </div> 46 <div> 47 <span class="float">float</span> 48 pppp 49 pppp pppp XXX<span class="wrapper">[ppp</span> 50 pppp 51 </div> 52 </div> 53 </div>