Force word wrap through CSS

Force word wrap through CSS

At the moment TEST TEST appear side by side. How can I push one down onto
a second line? Only through CSS.
<div id="box">TEST TEST</div>
#box{
height: 50px;
text-align: center;
position: relative;
margin: 0 auto;
background-color: red;
color: white;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}