| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #wrapper { |
| border: 1px solid red; |
| margin: 20px 0; |
| width: 200px; |
| } |
| |
| #p { |
| background: #EEE; |
| border-right: 1px solid green; |
| margin: 0; |
| margin-right: 32px; |
| padding-left: 30px; |
| } |
| |
| #float { |
| float: left; |
| display: inline-block; |
| width: 25px; |
| height: 25px; |
| background-color: green; |
| margin-left: -30px; |
| } |
| |
| #prtl { |
| background: #EEE; |
| border-left: 1px solid green; |
| margin: 0; |
| margin-left: 32px; |
| padding-right: 30px; |
| } |
| |
| #floatrtl { |
| float: right; |
| display: inline-block; |
| width: 25px; |
| height: 25px; |
| background-color: green; |
| margin-right: -30px; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>The text should not overflow the green border.</h2> |
| <div id="wrapper"> |
| <p id="p"> |
| <span id="float"></span> |
| no sea takimata sanctus estestest Lorem ipsum dolor sit amet. |
| </p> |
| </div> |
| |
| <h2>The text should not overflow the green border.</h2> |
| <div id="wrapper" style="direction:rtl"> |
| <p id="prtl"> |
| <span id="floatrtl"></span> |
| no sea takimata sanctus estestest Lorem ipsum dolor sit amet. |
| </p> |
| </div> |
| </body> |
| </html> |
