Ignore <Br> with CSS

Ignore br with CSS?

With css, you can "hide" the br tags and they won't have an effect:

br {
display: none;
}

If you only want to hide some within a specific heading type, just make your css more specific.

h3 br {
display: none;
}

How to disable br tags inside div by css?

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

How to ignore br tag in mobile view

Add this into your CSS:

@media(max-width: 360px) {
.email-message br {
display: none;
}
}

use some ID or class to encapsulate it's effect inside the elements you specifically need, otherwise it will get rid of all br tags in mobile. If this is what you want, simply do:

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

how to ignore br or line breaks in text with pure css truncate text button

Including the label inside the paragraph will allow it to stand aside the text and be part of the phrasing content of <p> instead being after the </p> line-break.

you should include the br in the css too , examples

  • you could switch it from absolute to static:

.read-more-state {  display: none;}
.read-more-target{ opacity: 0; max-height: 0; font-size: 0; transition: .25s ease;} .read-more-wrap br {position:absolute;}.read-more-state:checked ~ .read-more-wrap br {position:static}.read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; /* max-height: 999em;*/}
.read-more-state ~ p .read-more-trigger:before { content: 'Show more';}
.read-more-state:checked ~ p .read-more-trigger:before { content: 'Show less'; }

.read-more-trigger { cursor: pointer; display: inline; /*padding: 0 .5em;*/ color: black; font-size: .7em; line-height: 1; border: 0px solid #ddd;}
/* border-radius: .25em;}*/
<div>  <input type="checkbox" class="read-more-state" id="post-1" />
<p class="read-more-wrap">Clifton Benevento is pleased to present “Thinking Creatively With Pictures”, a solo exhibition of paintings and a video by New York based artist Sofia Leiby. In her newest body of work, Leiby mines the rich history of “projective drawing tests”, graphic assessments originating in Gestalt psychology, to self-reflexively address the relationship between mark-making and subjectivity. <br /> <br />
<span class="read-more-target">Leiby’s research in graphology led her to the field of psychometrics, or the theory and techniques of psychological assessment, and the history of the graphic test. Used in psychology, these tests present graphic stimuli usually organized in a grid or box that the test-taker responds to with a drawing and a title. The test-taker is then analyzed based on her drawing performance, according to criteria such as drawing time, the order of the squares drawn, refusing to draw, the size and content of the drawings, crossing of the borders of the squares, etc. (artistic ability is not usually considered). Upon completion, the psychoanalyst can deduce personality and diagnose possible psychological disorders. Such criteria is recognized as subjective but still ‘scored’ according to a very particular set of rules. Similar tests are also used to measure gender-role identification, creativity and imagination in corporate hiring and even as a prerequisite exam to join the Italian Armed Forces (The Wartegg Test). The Torrance Test for Creative Thinking, which includes graphic completion components, is widely used today to identify gifted children across the U.S, although there is still a lack of research surrounding most graphic completion tests. <br /> <br />
Leiby has indexed the graphic “stimuli” from The Wartegg Test (Eugene Wartegg, 1939), The Medallion Test (W.N. de Vletter, 1942), the Torrance Test for Creative Thinking (Ellis Paul Torrance, 1958), The Test for Creative Thinking-Drawing Production (Urban & Jellen, 1995), the Franck Drawing Completion Test (Franck & Rosen, 1949), and other related exams as well as completed specimens. Using silkscreen, she collages these elements that serve as the compositional framework for abstract paintings both colorful and monochromatic. A new video, ‘How to Improve Your Handwriting’ uses humor to underscore the connection between personality and gesture. <br /> <br /> Upon meeting artists Wassily Kandinsky and Paul Klee in the 1920s, Wartegg took inspiration from Kandinsky’s graphic theories in ‘Point and Line to Plane’ when developing the stimuli of his own graphic test. In observing parallels between the field of psychometrics, art theory and criticism, Leiby brings the graphic marks relegated to psychoanalysis full circle back to the realm of fine art; working within her own test-taking environment, Leiby’s paintings function as self-assessments of the personality and creativity of the artist. </span> <label for="post-1" class="read-more-trigger"></label></p> </div>
<img src="http://abelowdesign.com/sofialeiby/img/tcwp/3.jpg" width="400px">

When are br elements ignored when within a paragraph?

In my opinion most browsers follow the WHATWG specification and I would do it also. World Wide Web Consortium (W3C) has On 28 May 2019 announced that WHATWG would be the sole publisher of the HTML and DOM standards. If we have in this specification following rules only, then I would follow those rules.

WHATWG has following recommendations for br element:

The br element represents a line break.

Note: While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet or
user agent would be equally justified in causing line breaks to be
rendered in a different manner, for instance as green dots, or as
extra spacing.

br elements must be used only for line breaks that are actually part
of the content, as in poems or addresses.

The following example is correct usage of the br element:

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br elements must not be used for separating thematic groups in a
paragraph.

The following examples are non-conforming, as they abuse the br
element:

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

Here are alternatives to the above, which are correct:

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

If a paragraph consists of nothing but a single br element, it
represents a placeholder blank line (e.g. as in a template). Such
blank lines must not be used for presentation purposes.

Any content inside br elements must not be considered part of the
surrounding text.

Note: This element has rendering requirements involving the bidirectional algorithm.

Source: WHATWG: The br element

In your examples you have br elements in <br></p> and in <br></a></p> on the end of <p> element. The new line on the end of this element does nothing, but only in this case. In such of this cases you can ignore it. It is also the same in the case of br elements in <br></a></div> and in <br></div> on the end of <div> element.

Cite from WHATWG recommendations (see above): If a paragraph consists of nothing but a single br element, it represents a placeholder blank line. Also it is not empty (like user kalkronline wrote). And in case of W3C and WHATWG opinions conflict user agents have to follow WHATWG recomandations (see above).

Do not forget about style possibility (for ex. clear) for br element.


Update from 25/06/2020

I want to post and explain the cite from WHATWG recommendations again(see above):

If a paragraph consists of nothing but a single br element, it represents a placeholder blank line.

This is showed like:

p{border:1px dashed red}
<b>1. example:</b>
<code><p><br></p></code>
<p><br></p>
<b>2. example:</b>
<code><p>I am a line<br><br></p></code>
<p>I am a line<br><br></p>
<b>3. example:</b>
<code><p></p></code>
<p></p>

Remove additional line break tags using CSS

You can use br + br for this, check updated snippet below

br + br {    display: none;}
<p>The first paragraph.</p><p>The second paragraph.</p><br/><br/><br/><br/><p>The third paragraph.</p><p>The fourth paragraph.</p><p>The fifth paragraph.</p><p>The sixth paragraph.</p><br/><p>The seventh paragraph.</p><p>The eight paragraph.</p><br/><p>The ninth paragraph.</p>

Scrapy Ignore values after br tag

You needed to grab all the innerhtml instead of text which includes all of it's nested components.

loader.add_css('some', 'span.number *::text')

Text inside p after line break br ignores css for p tag if heading is also present

First of all, you cannot have any block level elements inside <p> tag. Even if your code has:

<p><h3>Heading</h3> some text</br> more text</p>

It renders like this in the browsers:

Browser Dev

So, it is better to use correct code like:

<h3>Heading</h3>
<p> some text</br> more text</p>

And style it using CSS.


Paragraph and Headings are two different animals. According to what you need in the comments, I would recommend this markup: