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

Question

请先看看这个：http: //jsfiddle.net/TWbWx/2/

HTML：

<div class="box">
    <div class="price">HUF129031290310</div>
</div>

CSS：

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

我想要的是当价格超过盒子的宽度时，数字应该低于货币。我怎样才能做到这一点？第一步是将货币和金额分开在单独的 div 中，但我不确定从那里去哪里。任何帮助都会很棒。

Answer 1

您可以结合使用<span>元素，这些元素本质上是inline-block，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;    
}

自己尝试一下。

Answer 2

我知道这个问题的答案已经给出，但我宁愿我会采用 java 脚本的方式而不是依赖于 CSS。所以这是我的代码：

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);
}

正如您从上面的代码中看到的那样，我将文本宽度与框宽度进行比较，如果条件成功，那么我将整个文本分解并一个接一个地放置。漂亮的小把戏。

这是适合您的工作小提琴：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;}