How to Line-Break from Css, Without Using ≪Br /≫

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



Leave a reply



Submit