如果文本打破了框的宽度，如何将文本移动到新行？

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 .

Answer 2

I know the answer to this has already been given, but i rather thought i will go the java script way rather than depending on CSS. So here's my code :

CSS:

.box {
    background-color:#00FF7F;
    height: 300px;
    width:120px;
    font-size:16px;
}

JS :

//method to find width of text
String.prototype.width = function(font) {
  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

var boxWidth = $('.box').width();
var priceFontSize = $('.price').css("font-size");
var priceWidth = $('.price').text().width($('.price').css("font-size"));
var priceText =  $('.price').text();
var matches = priceText.match(/\d+$/);
var number = matches[0];
var matchesText = priceText.match(/^\D+/);
var textSplit = matchesText[0];

//Test if width of text is greater than the box width
if(priceWidth  > boxWidth){
    $('.price').html(textSplit+'</br>'+number);
}

As you can see from the code above that, i am comparing the text width with the box width and if the condition succeeds , then i break the text as a whole and place one after another. Nifty little trick.

Here's the working fiddle for you : http://jsfiddle.net/TWbWx/25/

Answer 3

http://jsfiddle.net/TWbWx/21/

HTML

<div class="box">
   <div class="price">HUF</div>
   <div class="price">129031290310</div>
</div>

CSS

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

.price{float:left;}