12

这个片段显示了我想要的：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 的宽度（在项目中，视口中）下降到一个新行。

对不起我不好的解释。我不知道该怎么做。谢谢！

编辑：在第二个示例中，短语“SEPTIEMBRE DE 2013”​​。掉进一个新行。但是“17 DE”这句话仍然在最上面一行。我想要“2013 年 9 月 17 日”。掉进一个新行。知道了？

4

6 回答 6

35

如果您希望跨度不换行，而是完全移动到其他文本下方，您可以使用white-space: nowrap;

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

演示

于 2013-01-22T18:48:09.170 回答
15

要在空间不足时使 span 转到下一行，可以将其设置为display: inline-block;

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

检查这个：http: //jsfiddle.net/945Df/7/

于 2013-01-22T18:49:45.213 回答
5

这就是我实现它的方式：

#spantomovedown{
    clear: both;
    display: inline-block;
    width: 100%;
}
于 2018-10-18T20:55:56.327 回答
4 
.date{display:inline-block;}

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

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

于 2013-01-22T18:53:53.830 回答
1 
.date {
    white-space: nowrap;
}

http://jsfiddle.net/945Df/6/

于 2013-01-22T18:49:24.547 回答
1

如果你漂浮：对；当整个事情不再有空间时，它应该落到下一行。

之后您将需要一个清算元素。

于 2013-01-22T18:49:54.600 回答