Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Force Line Breaking test</title>
</head>
<body>
<div class="pre"><span class="ib"></span><span>
</span>A</div>
<div><span class="ib"></span><span class="pre">
</span>B</div>
<div><span class="ib"></span> <span class="pre">
</span>C</div>
<div><span class="ib"></span> <span class="br1"></span>D</div>
<div><span class="ib"></span> <span class="br2"></span>E</div>
<div><span class="ib"></span> <br>F</div>
<div><span class="ib"></span> <br style="display:inline-block !important; background-color: red; width:50px; height: 20px">G</div>
  
<section>
<p>Test A: newline inside span. No collapsible whitespace. block is white-space: pre</p>
<p>Test B: newline inside span. No collapsible whitespace. span is white-space: pre</p>
<p>Test C: newline inside span following collapsible whitespace. span is white-space: pre</p>
<p>Test D: span following collapsible whitespace, duplicating BR definition from HTML5</p>
<p>Test E: span following collapsible whitespace, duplicating BR definition from <a href="https://github.com/w3c/csswg-drafts/issues/610">https://github.com/w3c/csswg-drafts/issues/610</a></p>
<p>Test F: br following collapsible whitespace</p>
<p>Test G: br styling is very persistent</p>
</section>
</body>
</html>
 
    section {
        margin-top: 2em;
    }
    p {
        margin: 0.5em;
    }
    .ib {
        display: inline-block;
        width: 55px;
        height: 20px;
        background-color: green;
    }
    div {
        background-color: #ddd;
        margin-right: 10px;
        display: inline-block;
        width: 50px;
        vertical-align: top;
    }
    .br1::before {
        white-space: pre;
        content: "\a";
    }
    .br2 {
      all: unset !important;
      display: contents !important;
      white-space: pre !important;
    }
    .br2::before {
        all: unset !important;
        content: "\a" !important;
    }
    .pre {
        white-space: pre;
    }
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
faceless2pro
0viewers