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

Issue

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?

Solution

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

Answered By - sachleen