This snippet shows what i want:
<div> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span>17 de septiembre de 2013.</span></strong>
</div>
<div> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span>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?
06 Answers
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;
}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:
This is how I achieved it:
#spantomovedown{ clear: both; display: inline-block; width: 100%;
}.date{display:inline-block;}when the date is longer than the div, it is displayed on a new line
example:
.date { white-space: nowrap;
}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.
0
