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

You need to set the width of the div element. The elements will then roll over to the new line automatically.

#box{
    width:20px; /* or a suitable width*/
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    background-color: red;
    color: white;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

Note, however, that the height becomes dependent on the content. If there is allot of content then the element height will also increase.

And alernative approach is to set the word spacing for the parent container to a high amount, eg,

.parent {
  word-spacing:; 
}

That will also force word wrap after each word.