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

Question

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.

Answer 1

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.