Html 如何使整个跨度放入新行？

How to make a entire span drop into a new line?

提问by sanfilippopablo

This snippet shows what i want: http://jsfiddle.net/945Df/3/

这个片段显示了我想要的：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>

I want the span to drop into a new line when the width of the div (in the proyect, the viewport) when there's no more space.

当没有更多空间时，当 div 的宽度（在项目中，视口中）时，我希望跨度进入一个新行。

Sorry for me bad explanation. I don't know how to do it. Thanks!

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

Edit: In the second example, the phrase "SEPTIEMBRE DE 2013." drops into a new line. But the phrase "17 DE " is still in the upper line. I want "17 DE SEPTIEMBRE DE 2013." drops into a new line. Got it?

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

回答by sachleen

If you want the span to not wrap to a new line, but move entirely below the other text, you can use white-space: nowrap;

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

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

Demo

演示

回答by techfoobar

To make the span go to the next line when there is not enough space, you can set it to display: inline-block;

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

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

Check this: http://jsfiddle.net/945Df/7/

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

回答by Chris

.date{display:inline-block;}

when the date is longer than the div, it is displayed on a new line

当日期比 div 长时，显示在新行上

example: http://jsfiddle.net/TqRyK/

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

回答by Jaime Montoya

This is how I achieved it:

这就是我实现它的方式：

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

回答by Stephanie Miller

If you float:right; it when there is no longer room for the whole thing it should fall to the next line.

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

You will need a clearing element afterwards.

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

回答by isherwood

.date {
    white-space: nowrap;
}

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

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