How to line-break from css, without using ?

Question

output:

hello
How are you

code:

hello 
 How are you 

Ho

Answer 1

Use <br/> 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 <br/>)

While not immediately obvious, you can actually apply display:none to a <br/> tag to hide it, which enables the use of media queries in tandem with semantic BR tags.

<div>
  The quick brown fox<br />
  jumps over the lazy dog
</div>

@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

Answer 2

Use overflow-wrap: break-word; like :

.yourelement{
overflow-wrap: break-word;
}

Answer 3

This works in Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}

Answer 4

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;
 }

Answer 5

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;}
}

https://jsfiddle.net/517Design/o71yw5vd/

Answer 6

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.