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

Demo

Answer 2

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

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

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

Answer 3

.date{display:inline-block;}

当日期长于div时，它会显示在新行

上

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

Answer 4

.date {
    white-space: nowrap;
}

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

Answer 5

如果你漂浮：对;当它不再存在整个事物的空间时，它应该落到下一行。

之后你需要一个清算元素。

Answer 6

这是我实现的方式：

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

如何让整个跨度进入新的界限？

6 个答案: