How do I simulate <br/> (the br tag) using CSS?

Question

I have the following line of css and html here:

CSS:

.top, .title {
font-weight: bold;
}
.bottom, .Content {
}

HTML:

<span class='title'>Title</span>
<br/>
<span class='Content'>Content</span>
<br/><br/>

I would like to replace the <br/> tag with an equivalent in CSS, but I am struggling with it. I would appreciate any help.

I've tried margin-bottom, margin-top, line-height, none of it worked.

Answer 1

A solution that much more closely replicates br's magic is to inline it.

fake-br {
    display: inline;
    white-space: pre;
}
fake-br::before {
    content: "\200B\000A";
}
fake-br:nth-last-of-type(1) {
    flex: 0 0 0.1px;
}

br has interesting behavior, and this should accurately simulate br in most cases:

[].slice.call(document.getElementsByTagName("tr"), 1).forEach(t=>{
  t.firstChild.firstChild.style = t.textContent.replace(/\s/g,"");
  let html=t.innerHTML,add=h=>t.insertAdjacentHTML("beforeend",h);
  add( html.replace(/<br.*?>/g, "<faker></faker>") );
  add( html.replace(/<br.*?>/g, "<viter></viter>") );
});
wrapper.innerHTML += wrapper.innerHTML.replace(/normal/g, "250%")
                   + wrapper.innerHTML.replace(/normal/g,  "40%");

/* This answer presented here in this post */
faker {
    display: inline;
    white-space: pre;
}
faker::before {
    content: "\200B\000A";
}
faker:nth-last-of-type(1) {
    flex: 0 0 0.1px;
}

/* viter's answer from https://stackoverflow.com/a/19778533/5601591 */
viter:after {
    content: ' ';
    display: block;
}

td, th {
  /*Aesthetics*/
  border: 1px solid #e3e3e3;
  color: #272727;
  font: 0.875em monospace;
  white-space: nowrap;
  padding-left: 1.375em; /* for list-item */
}
td, th, tr, tbody, thead { line-height: inherit }
span { flex-wrap: wrap }

<div id="wrapper">
  <ul><li><code>line-height: <lh>normal</lh></code></li></ul>

  <table style="
    line-height: normal;
    table-layout: fixed;
    border-collapse: collapse;
    width:30em
  "><thead>
    <tr><th>&lt;br /&gt;</th><th>&lt;faker&gt;&lt;/faker&gt;</th><th>&lt;viter&gt;&lt;/viter&gt;</th></tr>
  </thead><tbody>
    <tr><td><span style="display:inline">display:<br /><br /><br />inline</span></td></tr>
    <tr><td><span style="display:inline-block">display:<br /><br /><br />inline-block</span></td></tr>
    <tr><td><span style="display:block">display:<br /><br /><br />block</span></td></tr>
    <tr><td><span style="display:inline-flex">display:<br /><br /><br />inline-flex</span></td></tr>
    <tr><td><span style="display:flex">display:<br /><br /><br />flex</span></td></tr>
    <tr><td><span style="display:inline-grid">display:<br /><br /><br />inline-grid</span></td></tr>
    <tr><td><span style="display:grid">display:<br /><br /><br />grid</span></td></tr>
    <tr><td><span style="display:contents">display:<br /><br /><br />contents</span></td></tr>
    <tr><td><span style="display:inline-table">display:<br /><br /><br />inline-table</span></td></tr>
    <tr><td><span style="display:table">display:<br /><br /><br />table</span></td></tr>
    <tr><td><span style="display:table-row">display:<br /><br /><br />table-row</span></td></tr>
    <tr><td><span style="display:table-cell">display:<br /><br /><br />table-cell</span></td></tr>
    <tr><td><span style="display:table-cell">display:<br /><br /><br />table-cell</span></td></tr>
    <tr><td><span style="display:list-item">display:<br /><br /><br />list-item</span></td></tr>
    <tr><td><span style="white-space:nowrap">white-space:<br /><br /><br />nowrap</span></td></tr>
    <tr><td><span style="white-space:pre">white-space:<br /><br /><br />pre</span></td></tr>
    <tr><td><span style="white-space:pre-wrap">white-space:<br /><br /><br />pre-wrap</span></td></tr>
    <tr><td><span style="white-space:pre-line">white-space:<br /><br /><br />pre-line</span></td></tr>
    <tr><td><span style="white-space:break-spaces">white-space:<br /><br /><br />break-spaces</span></td></tr>
  </tbody></table>
</div>

Run the code snippet above to see the results of the test cases.

Answer 2

Semantically, you would want to use a heading tag (h1, h2, etc) for the title and a paragraph tag (p) for the content. Both of those are block-level elements, for which things like margin and line-height work.

A span tag is an inline element, which (for all intents and purposes) means that it's meant to go in the middle of a block-level element without messing up the rest of the tag.

If you really want to stay with a span, then you can force the span to behave like a block-level element by giving it the CSS property display: block. I recommend that you use actual block-level elements such as h1 or p tags, though.

Answer 3

<style>
p.break{
    display:block;
    clear: both;
}
</style>

Answer 4

You can simulate BR tags width CSS like this:

span:after {
    content: ' ';
    display: block;
}

Use the selector ":before" if you need the "br" been simulated before the span content

jsfiddle

Answer 5

I had a similar problen when dealing with WordPress. Wordpress is notorious for automatically removing formatting characters from a user's text for a blog article. My challenge was to center the article text and split the line into two.

This what I did:

<center>This is a very long title line I want displayed in my <div>WordPress Article Title Line</div></center>

The action of the <center> is pretty self-explanatory. Since a <div> is a block-level element, it issues a new line.

Hope this helps.

Answer 6

use display:block; on span,

like:

.title, .Content { display:block; }

Answer 7

<span> is an inline element, so can't have margin applied, but it can take padding - give it something like .title { padding: 10px 0; } and it'll simulate a paragraph, or just .title { display: block; } to force the next thing to go beneath it.

Answer 8

display: block; however, <span> is semantically probably the wrong tag to use (being an inline tag rather than a block tag); <div> is probably a better match, and comes with the bonus that it already displays as a block. Other tags might be more appropriate still.

Answer 9

Well, the problem is that you are using a "span" which is an inline tag. You have to use block element to be able to use margin-bottom for example.

You could try this:

.top {
    font-weight: bold;
    display: block;
}
.bottom {
    display: block;
}

Or you could also use display: inline-block;