new line without br tag
You can use the <pre>
tag to keep the line breaks.
<pre>
lorem ipsum
lorem ipsum
lorem ipsum
</pre>
The default style for pre
tags is monospaced font, but that can be overriden.
You can achieve the same effect without any extra default formatting using the white-space: pre
CSS property.
<div style="white-space: pre">
lorem ipsum
lorem ipsum
lorem ipsum
</div>
There are several other values for white-space
, but you should refer to the documentation to choose the most fitting one.
Note that pre
will treat every line break the same including the one following the <pre>
or <div>
tags. If you don't want them you will need to do:
<div style=...>lorem ipsum
lorem ipsum
...
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>
how to make line break in html without br
I'll assume your original content has breaks caused by carriage returns or line feeds, but they're not rendered that way in your HTML.
To fix that, add CSS style pre-wrap
:
div { white-space: pre-wrap;}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Give a line break without using br/
You can use
#showmenu{
margin-bottom:10px;
}
Demo
Make new line without using br in HTML
Start by removing float: left
from h1
.
Then add the rule:
a.view-options {
display: block;
}
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>
HTML line break without br/ or \n?
You can use white-space: pre
to allow newlines (\n
) to have an effect in HTML:
var i = 0;var info_text = document.getElementById('foo')text = "lorem ipsum\nlorem ipsum";function type_it() {if (i < text.length) { info_text.innerHTML += text.charAt(i); i++; setTimeout(type_it, 50); }}
type_it()
#foo {white-space: pre;}
<div id="foo"></div>
What is the alternative to br / if I want to control the height between lines?
Use differents blocks :
<p>Line1</p>
<p>Line2</p>
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; }
Related Topics
How to Center Elements on the Last Row in CSS Grid
What's the Proper Value For a Checked Attribute of an HTML Checkbox
Why Are Bootstrap Tabs Displaying Tab-Pane Divs With Incorrect Widths When Using Highcharts
Col-Xs-*' Not Working in Bootstrap 4
How to "Disable" Zoom on a Mobile Web Page
Nesting ≪P≫ Won't Work While Nesting ≪Div≫ Will
Cross-Browser Custom Styling For File Upload Button
Preventing Double Borders in CSS Grid
Nesting Block Level Elements Inside the ≪P≫ Tag... Right or Wrong
How to Use the "Required" Attribute With a "Radio" Input Field
How to Make an HTML Button Not Reload the Page
Make Absolute Positioned Div Expand Parent Div Height
How to Make a Vertical Line in Html