Force word wrap through CSS

Question

At the moment TEST TEST appear side by side. How can I push one down onto a second line? Only through CSS.

TEST TEST
         


        
      

Answer 1

I will do something like this.

lorem ipsum 
  
    dolor site amet
  


.wrap-text{
     white-space: pre-line;
}

Not sure why one of the above suggestion uses pre-wrap. I think pre-line will be a better one. It will ignore all spaces and tabs but honour hard returns in source code.

So in your code, for places you want to wrap to the second line, do a hard return.

I like putting a span class is because with this you can make it responsive, only trigger the wrapping at certain viewport sizes. eg: @media (max-width:768px)