如何使整个跨度下降到一个新行? [英] How to make a entire span drop into a new line?

问题描述

此代码段显示了我想要的内容: http://jsfiddle.net/945Df/3/

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>

当没有更多空间时，当div的宽度(在proyect中，视口中)时，我希望跨度下降到新行中.

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!

在第二个示例中，短语"SEPTIEMBRE DE 2013"​​.进入新的一行.但是短语"17 DE"仍然在最上面.我想要"2013年7月17日DE.".进入新的一行.知道了吗?

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?

推荐答案

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

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

演示

这篇关于如何使整个跨度下降到一个新行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！