51

<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/

17
  • 6
    Just remove the tags then ;) What are you expecting CSS to do about it? This question makes no sense...
    – dsgriffin
    Commented Jul 11, 2013 at 8:49
  • You want to remove HTML Elements via CSS? Not possible.
    – mishik
    Commented Jul 11, 2013 at 8:49
  • 7
    "messing my css" isn't really a valid problem. What specifically is the problem?
    – George
    Commented Jul 11, 2013 at 8:50
  • 2
    @bottleboot No, he won't need jquery. If you think he will need, please give your reasons. Commented Jul 11, 2013 at 8:52
  • 1
    And should never have a <br /> after a <p> tage, you would get the spacing you need by applying margin-bottom:10px to <p> tags in css
    – rorypicko
    Commented Jul 11, 2013 at 8:53

8 Answers 8

90

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

2
  • 16
    You should use display:none for br if you want to remove them. Commented Jul 11, 2013 at 8:51
  • 1
    True. jsfiddle.net/zG9Ax/1 slightly more code though. Just pointing in a possible direction here.
    – Tim
    Commented Jul 11, 2013 at 8:53
6

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;
}
3
  • It's interesting that the content property is needed for the display: inline; to work. How did you figure that out and any idea why that is so? Commented Nov 25, 2021 at 8:19
  • You can leave out the content property but then the next word will be right up against the previous word. The content:' ' prop with display:inline acts like a non breaking space. Commented Dec 9, 2021 at 18:07
  • Hello David, I used this promising answer but it doesn't work on Firefox (100.0b5 (64-bit)) and Safari unfortunately (Version 15.4 (17613.1.17.1.13)) Commented Apr 14, 2022 at 7:57
4

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

p + br {
    display: none;
}
2
<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>
2

You can usedisplay:contents, but avoid accessibility problems to apply this only on br tags:

br {
  display:contents;
}

see https://developer.mozilla.org/en-US/docs/Web/CSS/display-box

[display:contents;] most browsers will remove from the accessibility tree any element with a display value of contents. [...] no longer be announced by screen reading technology.

1

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)

0

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.

0

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;
}
5
  • 1
    This is not valid HTML or CSS.
    – TylerH
    Commented Sep 20, 2021 at 21:14
  • how so? I applied it to my css and it worked. Commented Sep 24, 2021 at 18:51
  • 1
    CSS does not have a 'nested selector' feature (outside of media queries or the keyframe steps of an animation). I'm guessing you are using a preprocessor like Sass or Less and not considering that before compiling it into CSS (where it would compile to something like div br { display: none; }.
    – TylerH
    Commented Sep 24, 2021 at 19:30
  • oh I see what you meant. Yes, I am using a preprocessor. - appreciate the info. I'll take down my comment. Commented Sep 27, 2021 at 13:54
  • This is actually a good idea.
    – Weilory
    Commented Dec 6, 2021 at 5:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.