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

Question

This snippet shows what i want: 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.

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?

Answer 1

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

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

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

Answer 2

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;

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

Demo

Answer 3

This is how I achieved it:

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