Line break (like br ) using only css
It works like this:
h4 {
display:inline;
}
h4:after {
content:"\a";
white-space: pre;
}
Example: http://jsfiddle.net/Bb2d7/
The trick comes from here: https://stackoverflow.com/a/66000/509752 (to have more explanation)
How to insert a line break before an element using CSS
It's possible using the \A
escape sequence in the psuedo-element generated content. Read more in the CSS2 spec.
#restart:before { content: '\A'; }
You may also need to add white-space:pre;
to #restart
.
note: \A
denotes the end of a line.
p.s. Another treatment to be
:before { content: ' '; display: block; }
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>
How to line-break from css, without using br / ?
Impossible with the same HTML structure, you must have something to distinguish between Hello
and How are you
.
I suggest using span
s that you will then display as blocks (just like a <div>
actually).
p span { display: block;}
<p><span>hello</span><span>How are you</span></p>
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>
How do I replace all line breaks in a string with br / elements?
This will turn all returns into HTML
str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');
In case you wonder what ?: means.
It is called a non-capturing group. It means that group of regex within the parentheses won't be saved in memory to be referenced later.
You can check out these threads for more information:
https://stackoverflow.com/a/11530881/5042169
https://stackoverflow.com/a/36524555/5042169
Replace line break characters with br / in ASP.NET MVC Razor view
Use the CSS white-space property instead of opening yourself up to XSS vulnerabilities!
<span style="white-space: pre-line">@Model.CommentText</span>
Line break in HTML with '\n'
This is to show new line and return carriage in HTML, then you don't need to do it explicitly. You can do it in CSS by setting the white-space attribute pre-line value.
<span style="white-space: pre-line">@Model.CommentText</span>
Keep line breaks in HTML string
HTML, in general, uses br
tags to denote a new line. A plain textarea
tag does not use this, it uses whatever the user's system uses to denote a new line. This can vary by operating system.
Your simplest solution is to use CSS
<main role="main" class="container">
<p style="margin-bottom: 2rem;white-space:pre-wrap;">{{review.body}}</p>
</main>
This will maintain any "white space" formatting, including additional spaces.
If you want to actually replace the newline characters with br
tags you can use the following regex
<main role="main" class="container">
<p style="margin-bottom: 2rem;" [innerHTML]="review.body.replace(/(?:\r\n|\r|\n)/g, '<br>')"></p>
</main>
Edit Thanks to ConnorsFan for the heads up on replace not working with interpolation.
Related Topics
What Is the ::Content/::Slotted Pseudo-Element and How Does It Work
How to Do Awesome Refreshless Page Changes Like Github Do
How to Create a Polygon Shape Div
How to Remove Focus Around Buttons on Click
HTML Auto Embedding Recent Uploaded Videos from a Youtube Channel
What Is the Purpose of .Row in Bootstrap
Is HTML Considered a Programming Language
Easiest Way to Extract the Urls from an HTML Page Using Sed or Awk Only
Do I Need a "/" at the End of an <Img> or <Br> Tag, etc.
How to Make in CSS an Overlay Over an Image
Fill Remaining Vertical Space - Only CSS
Divs VS. Tables a Rebuttal Please
CSS Horizontal Centering of a Fixed Div
How to Validate the Size and Type of Input=File in HTML5
How to Avoid Sending Input Fields Which Are Hidden by Display:None to a Server