Question

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

Try it out yourself

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

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

3 个答案: