How to line-break from css without using br

Question

output    hello How are you   code    lt p gt hello  lt br gt  How are you  lt  p gt    How to achieve same output without  lt br gt

User · Answer

Building on what has been said before  this is a pure CSS solution that works    lt style gt    span       display  inline        span before       content    a        white-space  pre       lt  style gt   lt p gt    First line of text   lt span gt Next line  lt  span gt   lt  p gt

User · Answer

Don t  If you want a hard line break  use one

User · Answer

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

User · Answer

This works in Chrome   p  after       content   -       color  transparent      display  block

User · Answer

You can use white-space  pre  to make elements act like  lt pre gt   which preserves newlines   Example    x000D   x000D  p   x000D    white-space  pre  x000D    x000D   lt p gt hello  x000D  How are you lt  p gt  x000D   x000D   x000D    Note for IE that this only works in IE8

User · Answer

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

User · Answer

Using  amp nbsp  instead of spaces will prevent a break    lt span gt I amp nbsp DONT amp nbsp WANT amp nbsp TO amp nbsp BREAK amp nbsp THIS amp nbsp LINE amp nbsp UP  but this text can be on any line  lt  span gt

User · Answer

In case this helps someone     You could do this    lt p gt This is an  lt a class  on-new-line  gt inline link lt  a gt   lt  p gt    With this css   a on-new-line before      content    amp nbsp       font-size 0     display block    line-height 0

User · Answer

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  lt p gt  and  lt div gt  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  lt br   gt  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  lt greeting gt  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

User · Answer

I like very simple solutions  here is the one more   lt p gt hello  lt span gt How are you lt  span gt  lt  p gt    and css  p    display  flex   flex-direction  column

User · Answer

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

User · Answer

You need to declare the content within  lt span class  class name  gt  lt  span gt   After it the line will be break     A means line feed character    class name  after     content    A     white-space  pre

User · Answer

lt pre gt   lt --------------------------------------- lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum  lt  pre gt   lt --------------------------------------   OR   lt div style  white-space pre  gt    lt ----------------------------------- lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum  lt  div gt                           lt -----------------------------------   source  https   stackoverflow com a 36191199 2377343

User · Answer

The code can be     lt div class  text-class  gt  lt span gt hello lt  span gt  lt span gt How are you lt  span gt  lt  div gt    CSS would be   text-class        display  flex       justify-content  flex-start       flex-direction  column       align-items  center

User · Answer

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  lt div gt  actually     x000D   x000D  p span   x000D    display  block  x000D    x000D   lt p gt  lt span gt hello lt  span gt  lt span gt How are you lt  span gt  lt  p gt  x000D   x000D   x000D

User · Answer

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  lt br   gt  in your text  then giving it a class like  lt br class  hidebreak   gt  then using media query right above the size you want it to break to hide the  lt br   gt  so it breaks at a specific width but stays inline above that width   HTML    lt p gt  The below line breaks at 766px   lt  p gt    lt p gt   This is the line of text lt br class  hidebreak  gt  I want to break   lt  p gt    CSS    media  min-width  767px      br hidebreak  display none       https   jsfiddle net 517Design o71yw5vd

User · Answer

Use  lt br  gt  as normal  but hide it with display  none when you don t want it  I would expect most people finding this question want to use css   responsive design to decide whether or not a line-break appears in a specific place   and don t have anything personal against  lt br  gt   While not immediately obvious  you can actually apply display none to a  lt br  gt  tag to hide it  which enables the use of media queries in tandem with semantic BR tags   lt div gt    The quick brown fox lt br   gt    jumps over the lazy dog  lt  div gt    media screen and  min-width  20em      br       display  none     hide the BR tag for wider screens  i e  disable the line break            This is useful in responsive design where you need to force text into two lines at an exact break  jsfiddle example

User · Answer

Use overflow-wrap  break-word   like     yourelement  overflow-wrap  break-word

User · Answer

At the CSS use the code  p       white-space  pre-line      With this code css every enter inside the P tag will be a break-line at the html

User · Answer

For a List of Links 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   lt style type  quot text css quot  gt       toc a after  content   quot  a quot   white-space  pre     lt  style gt    lt span class  quot toc quot  gt       lt a href  quot  a1 quot  gt Item A1 lt  a gt   lt a href  quot  a2 quot  gt Item A2 lt  a gt       lt a href  quot  b1 quot  gt Item B1 lt  a gt   lt a href  quot  b2 quot  gt Item B2 lt  a gt   lt  span gt   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   lt style type  quot text css quot  gt       toc br  display  none       comment out for horizontal links     lt  style gt    lt span class  quot toc quot  gt       lt a href  quot  a1 quot  gt Item A1 lt  a gt  lt br  gt   lt a href  quot  a2 quot  gt Item A2 lt  a gt  lt br  gt       lt a href  quot  b1 quot  gt Item B1 lt  a gt  lt br  gt   lt a href  quot  b2 quot  gt Item B2 lt  a gt  lt br  gt   lt  span gt   Note the advantages of the above solutions   No matter the whitespace in the HTML  the output is the same  vs  pre  No extra padding is added to the elements  see NickG s display block comments  You can easily switch between horizontal and vertical lists of links with some shared CSS without going into every HTML file for a style change No float or clear styles affecting surrounding content The style is separate from the content  vs   lt br  gt   or pre with hard-coded breaks  This can also work for loose links using a toc after and  lt a class  quot toc quot  gt  You can add multiple breaks and even prefix suffix text

User · Answer

Both Vincent Robert and Joey Adams answers are valid  If you don t want  however  change the markup  you can just insert a  lt br   gt  using javascript   There is no way to do it in CSS without changing the markup

User · Answer

There are several options for defining the handling of white spaces and line breaks   If one can put the content in e g  a  lt p gt  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    lt style gt   p        white-space  pre-line     collapse WS  preserve LB          lt  style gt    lt p gt hello How are you lt  p gt    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      SOURCE  W3 Schools

User · Answer

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    lt h1 gt      Breaking lt br   gt News  lt br   gt BR lt br   gt Considered lt br   gt Harmful   lt  h1 gt    CSS    media  min-device-width  1281px       h1 br  content            h1 br after  content

User · Answer

How about lt pre gt  tag   source  http   www w3schools com tags tag pre asp

User · Answer

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

User · Answer

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

[html] How to line-break from css, without using <br />?

Examples related to html

Examples related to css