How to disable <br> tags inside <div> by css?

Question

<br> won't let me to display 3 buttons inline, so i need to disable it inside div, and I can't just delete them, they are automatically there.

I have:

<div style="display:block">
    <p>Some text</p>
    <br>
    <p>Some text</p>
    <br>
</div>

and I want:

<div style="display:block">
    Some text Some text
</div>

More info

I do not want to have mystyle.css file. Of course I know that way of disabling it.

I asked how to add to divs style this br { display: none; } if it is possible.

Solution:

1. It is not possible to remove just <p> tags without removing content inside.
2. It is not possible to hide <br> directly by divs style, so I make it this way:

<style type="text/css">
.mydiv {
display: block;
width: 100%;
height: 10px;
}
.mydiv br {
display: none;
}
</style>
    
<div class="mydiv">
Some text
Some text
</div>

http://jsfiddle.net/cGT4E/

Answer 1

You could alter your CSS to render them less obtrusively, e.g.

div p,
div br {
    display: inline;
}

http://jsfiddle.net/zG9Ax/

or - as my commenter points out:

div br {
    display: none;
}

but then to achieve the example of what you want, you'll need to trim the p down, so:

div br {
    display: none;
}
div p {
    padding: 0;
    margin: 0;
}

http://jsfiddle.net/zG9Ax/1

Answer 2

or hide any br that follows the p tag, which are obviously not wanted

p + br {
    display: none;
}

Answer 3

I used this and it had the effect of removing the line break and showing it as a space between words. I think this is closer to what you were looking for.

br {
  display: inline;
  content: ' ';
  padding: 0 3px;
}

Answer 4

<p style="color:black">Shop our collection of beautiful women's <br> <span> wedding ring in classic &amp; modern design.</span></p>

Remove <br> effect using CSS.

<style> p br{ display:none; } </style>

Answer 5

I used it like this:

@media (max-width: 450px) {
  br {
    display: none;
  }
}

nb: media query via Foundation nb2: this is useful if one of the editor intend to use
tags in his/her copy and you need to deal with it specifically under some conditions—on mobile for example.

Answer 6

I see people commenting just to remove from the html, but if you want to remove it only from certain type of @media screens, then this is the way to go:

div br {
  display: none;
}

Answer 7

I came across the same problem and solved it with display: contents

Here is the demo:

.wrapper {
  background: #EEE;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}

.wrapper * {
  display:contents;
} 

<div class="wrapper">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br/>
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  <br/>
    Pretium lectus quam id leo in vitae turpis massa sed. Lorem ipsum dolor sit amet consectetur adipiscing elit.<br/>
    Sagittis id consectetur purus ut faucibus pulvinar elementum. Netus et malesuada fames ac turpis egestas sed.<br/>
    Eget duis at tellus at.
  </p>
  <p>
    Faucibus vitae aliquet nec ullamcorper sit amet risus. Tortor condimentum lacinia quis vel eros donec ac.<br/>
    Tellus in hac habitasse platea dictumst vestibulum. Aliquam id diam maecenas ultricies. Tortor id aliquet lectus proin nibh nisl condimentum id.<br/>
    Sed enim ut sem viverra. <br/> 
    Morbi tristique senectus et netus et.
  </p>
</div>

So according to MDN,

These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.

What makes it worthy, (again taken from MDN)

Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements"

Here CSS Display Level 3 spec says, certain elements are rendered as display: none if display:contents applies to them:

<br> <wbr> <meter> <progress> <canvas> <embed> <object> <audio> <iframe> <img> <video> <frame> <frameset> <input> <textarea> <select>

display: contents computes to display: none.

(source: https://drafts.csswg.org/css-display/#unbox)