如何让整个范围落入新线？

Question

这个片段显示了我想要的内容:http: //jsfiddle.net/945Df/3/

<div class="sup" id="pr">
    <strong>
        <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span></strong>
</div>
<div class="sup">
    <strong>
        <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span>
    </strong>
</div>

当没有更多空间时,我希望当div的宽度(在proyect,视口中)时,跨度将放入一个新行.

对不起我的不好解释.我不知道怎么做.谢谢!

编辑:在第二个示例中,短语"SEPTIEMBRE DE 2013"​​.落入一条新线.但是"17 DE"这个短语仍然处于上限.我想要"17 DE SEPTIEMBRE DE 2013"​​.落入一条新线.得到它了？

Answer 1

如果您希望跨度不换行到新行,但完全低于其他文本,则可以使用 white-space: nowrap;

.date {
    text-transform: uppercase;
    color:#848484;
    white-space:nowrap;
}

演示

Answer 2

要在没有足够空间时使跨度转到下一行,可以将其设置为 display: inline-block;

.date {
    display: inline-block;
    ...
}

检查一下:http://jsfiddle.net/945Df/7/

Answer 3

这就是我实现它的方法：

#spantomovedown{
    clear: both;
    display: inline-block;
    width: 100%;
}

Answer 4

.date{display:inline-block;}

当日期比div长时，换行显示

示例： http: //jsfiddle.net/TqRyK/