| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Text Level 3: pre-wrap conditionality when not at line end</title> |
| <link rel="author" title="Andreu Botella" href="mailto:[email protected]"> |
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging"> |
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> |
| <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <meta name="assert" content="Spaces with white-space: pre-wrap always hang unconditionally when followed by other unconditionally hanging glyphs"> |
| |
| <style> |
| div { |
| font: 25px/1 Ahem; |
| width: 5ch; |
| height: 4ch; |
| margin-left: -1ch; |
| background: |
| linear-gradient(red, red) 4ch 0 / 1ch 4ch no-repeat, |
| linear-gradient(green, green) 1ch 0 / 3ch 4ch no-repeat; |
| |
| white-space: normal; |
| text-align: right; |
| color: green; |
| } |
| .pre-wrap { |
| white-space: pre-wrap; |
| } |
| </style> |
| |
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> |
| |
| <div><span class="pre-wrap">X </span>　<br>X<br>X<br>X</div> |
| |
| <!-- |
| With white-space: pre-wrap, spaces hang conditionally when they are followed |
| by a forced line break. If instead they are followed by a glyph that hangs |
| unconditionally, such as the ideographic space (U+3000) with |
| white-space: normal, then they are not followed by a forced line break, even |
| if that hanging glyph might be, and thus hang unconditionally as well. |
| --> |
