How to achieve same output without <br>
?
<p>hello <br> How are you </p>
output:
hello How are you
You can use white-space: pre;
to make elements act like <pre>
, which preserves newlines. Example:
p {
white-space: pre;
}
<p>hello
How are you</p>
white-space
CSS rule.
Commented
May 6, 2020 at 13:07
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>
<br />
element exists for a very good reason. If you want the line break because they are separate paragraphs, then simply mark them up as separate paragraphs.
Commented
Apr 24, 2010 at 8:11
<br>
is the correct markup. Spans for a poem would be “wrong.”
<br/>
as normal, but hide it with display: none
I would expect most people finding this question are looking to use responsive design to decide whether or not a line-break appears in a specific place.
While not immediately obvious, you can apply display:none
to a <br/>
in order to hide it.
br { display: none; }
This means you can use media queries just as you would for any other css.
<div>
The quick brown fox<br />
jumps over the lazy dog
</div>
@media screen and (min-width: 20em) {
br {
/* hide the BR tag for wider screens (i.e. no line break) */
display: none;
}
}
This can be useful if you need to force a line break in a different place based on the screen width. And of course you can also use
if you want to always prevent a line break from happening in a specific place.
display: none
solution is by far the most appropriate and useful.
Commented
Jun 24, 2014 at 5:53
display: inline-block; width: 1em;
instead of none
.
<br class='foo'>
if you needed more control but don't go too crazy!
Commented
Nov 27, 2016 at 6:36
<br/>
is great at what it does; no need to reinvent the wheel. Thanks!
There are several options for defining the handling of white spaces and line breaks.
If one can put the content in e.g. a <p>
tag it is pretty easy to get whatever one wants.
For preserving line breaks but not white spaces use pre-line
(not pre
) like in:
<style>
p {
white-space: pre-line; /* collapse WS, preserve LB */
}
</style>
<p>hello
How are you</p>
If another behavior is wanted choose among one of these (WS=WhiteSpace, LB=LineBreak):
white-space: normal; /* collapse WS, wrap as necessary, collapse LB */
white-space: nowrap; /* collapse WS, no wrapping, collapse LB */
white-space: pre; /* preserve WS, no wrapping, preserve LB */
white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
white-space: inherit; /* all as parent element */
The "\a" command in CSS generates a carriage return. This is CSS, not HTML, so it shall be closer to what you want: no extra markup.
In a blockquote
, the example below displays both the title and the source link and separate the two with a carriage return ("\a"
):
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
display:flex
and therefore is a hack in this context). Its not fancy, really, just a modern technique. If you want the exact same markup, but to actually react differently that’s the way to go.
"
– do not use simple quotes '
because you want to allow the \a
to get parsed as a special character.
Commented
Aug 11, 2016 at 17:17
In the CSS use the code
p {
white-space: pre-line;
}
With this CSS every enter inside the P
tag will be a break-line at the HTML.
Building on what has been said before, this is a pure CSS solution that works.
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
input type='text', wrapping the input, and then laying the text over it with a wrapper
div. That also requires
pointer-events:none;` on the :before
in order to still be able to click the button below.
Commented
Feb 1, 2016 at 6:16
To make an element have a line break afterwards, assign it:
display:block;
Non-floated elements after a block level element will appear on the next line. Many elements, such as <p> and <div> are already block level elements so you can just use those.
But while this is good to know, this really depends more on the context of your content. In your example, you would not want to use CSS to force a line break. The <br /> is appropriate because semantically the p tag is the the most appropriate for the text you are displaying. More markup just to hang CSS off it is unnecessary. Technically it's not exactly a paragraph, but there is no <greeting> tag, so use what you have. Describing your content well with HTMl is way more important - after you have that then figure out how to make it look pretty.
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------
OR
<div style="white-space:pre"> <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div> <-----------------------------------
Here's a bad solution to a bad question, but one that literally meets the brief:
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}
ex
be? p
and e
are not that close on the keyboard, that's why I'm asking
Commented
Jun 12, 2014 at 17:01
ex
is defined as "Equal to the used x-height of the first available font."
Maybe someone will have the same issue as me:
I was in a element with display: flex
so I had to use flex-direction: column
.
The other answers provide some good ways of adding line breaks, depending on the situation. But it should be noted that the :after
selector is one of the better ways to do this for CSS control over lists of links (and similar things), for reasons noted below.
Here's an example, assuming a table of contents:
<style type="text/css">
.toc a:after{ content: "\a"; white-space: pre; }
</style>
<span class="toc">
<a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
<a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>
And here's Simon_Weaver's technique, which is simpler and more compatible. It doesn't separate style and content as much, requires more code, and there may be cases where you want to add breaks after the fact. Still a great solution though, especially for older IE.
<style type="text/css">
.toc br{ display: none; } /* comment out for horizontal links */
</style>
<span class="toc">
<a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
<a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>
Note the advantages of the above solutions:
pre
)display:block
comments)float
or clear
styles affecting surrounding content<br/>
, or pre
with hard-coded breaks)a.toc:after
and <a class="toc">
I like very simple solutions, here is one more:
<p>hello <span>How are you</span></p>
and CSS:
p {
display: flex;
flex-direction: column;
}
Setting a br
tag to display: none
is helpful, but then you can end up with WordsRunTogether. I've found it more helpful to instead replace it with a space character, like so:
HTML:
<h1>
Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>
CSS:
@media (min-device-width: 1281px){
h1 br {content: ' ';}
h1 br:after {content: ' ';}
}
br
to display: inline-block; width: 1em;
which should prevent the words from running together when going horizontal.
How about<pre>
tag?
<pre>
so it breaks the line. What if you want to have regular whitespaces?
Commented
Sep 30, 2013 at 8:18
The code can be:
<div class="text-class"><span>hello</span><span>How are you</span></div>
CSS would be:
.text-class {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
You need to declare the content within <span class="class_name"></span>
. After it the line will be break.
\A
means line feed character.
.class_name::after {
content: "\A";
white-space: pre;
}
You can add a lot of padding and force text to be split to new line, for example
p {
padding-right: 50%;
}
Worked fine for me in a situation with responsive design, where only within a certain width range it was needed for text to be split.
A modern and simple solution could be setting the width like that:
width: min-content;
This CSS rule is mostly useful for text content, but not only: https://developer.mozilla.org/en-US/docs/Web/CSS/min-content
p {
margin: 20px;
color: #222;
font-family:'Century Gothic', sans-serif;
border: 2px dotted grey;
padding: 3px;
}
.max {
width: max-content;
}
.min {
width: min-content;
}
<!DOCTYPE html>
<html lang="en">
<head />
<body>
<p class="max"> Max width available </p>
<p class="min"> Min width available </p>
</body>
</html>
Using white-space
will not work for long sentences without spaces like HiHowAreYouHopeYouAreDoingGood...etc
to fix this consider using word-wrap: break-word;
instead
it's made to allow long words to be able to break and wrap onto the next line., its used by Facebook, Instagram and me 😆
Example
#container {
width: 40%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#container p{
white-space: pre-line;
background-color: green;
}
.flex{
display: flex;
}
#wrap {
width: 30%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#wrap p{
word-wrap: break-word;
background-color: green;
}
<h1> white-space: pre-line;</h1>
<div class='flex'>
<div id="container">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="container">
<h5>No specaes (not working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
<h1> word-wrap: break-word;</h1>
<div class='flex'>
<div id="wrap">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="wrap">
<h5>No specaes (working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
On CSS-tricks, Chris Coyier
have tested lots of options and the final and pretty neat one was using display:table
, Each one have their own problems which you will find out when you use background-color
on the span!
body {
padding: 20px;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 24px;
line-height: 1.6;
background: #eee;
padding: 20px;
margin: 5px 0 25px 0;
text-align:center;
}
h1 span {
color: white;
font-weight: 900;
}
h1 span {
background: black;
padding: 1px 8px;
display: table;
margin:auto;
}
<h1 class="one">
Break right after this
<span>
and before this
</span>
</h1>
Here You can see all other options on codepen
:
Both Vincent Robert and Joey Adams answers are valid. If you don't want, however, change the markup, you can just insert a <br />
using javascript.
There is no way to do it in CSS without changing the markup.
:after
or :before
to do that.
Commented
Jun 20, 2012 at 16:47
In my case, I needed an input button to have a line break before it.
I applied the following style to the button and it worked:
clear:both;
In case this helps someone...
You could do this:
<p>This is an <a class="on-new-line">inline link</a>?</p>
With this css:
a.on-new-line:before {
content: ' ';
font-size:0;
display:block;
line-height:0;
}
Using
instead of spaces will prevent a break.
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>
I'm guessing you did not want to use a breakpoint because it will always break the line. Is that correct? If so how about adding a breakpoint <br />
in your text, then giving it a class like <br class="hidebreak"/>
then using media query right above the size you want it to break to hide the <br />
so it breaks at a specific width but stays inline above that width.
HTML:
<p>
The below line breaks at 766px.
</p>
<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>
CSS:
@media (min-width: 767px) {
br.hidebreak {display:none;}
}
"Tip: The <br> tag is useful for writing addresses or poems."
Commented
Jun 21, 2018 at 22:41
This works in Chrome:
p::after {
content: "-";
color: transparent;
display: block;
}
Simple easy solution. Name th external paragraph class as 'parent' and internal paragraph as 'child'.
Set css property
parent: margin-bottom: 0;
child: margin-top: 0;
You are good to go.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Solve</title>
<style>
.parent {
margin-bottom: 0;
}
.child {
margin-top: 0;
}
</style>
</head>
<body>
<p class="parent"> hello
<p class="child">How are you</p>
</p>
</body>
</html>