How can I move text to a new line if it breaks the width of a box?

css, html

Solution

You could combine the use of `<span>` elements, which are inherently `inline-block`, with `word-wrap:break-word`.

HTML:

<div class="box">
    <div class="price">
        <span>HUF</span>
        <span>12944444</span>
    </div>
</div>

CSS:

.box {
    background-color:#00FF7F;
    height: 300px;
    width:120px;
    word-wrap: break-word;    
}

Try it out yourself.

Problem

Please take a look at this first: http://jsfiddle.net/TWbWx/2/ HTML: ``` <div class="box"> <div class="price">HUF129031290310</div> </div> ``` CSS: ``` .box { background-color:#00FF7F; height: 300px; width:120px; } ``` What I want is when the price goes past the width of the box the numbers should go under the currency. How can I do this? The first step is separating the currency and the amount in separate divs but I'm unsure where to go from there. Any help would be great.

Original source