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

Try it out yourself .