css 如何使整个跨度下降到一个新的线？

8yoxcaq7 于 2024-01-09 发布在其他

关注(0)|答案(6)|浏览(95)

这段代码显示了我想要的：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的宽度（在项目中，视口）时，没有更多的空间。
抱歉，我解释得不好。我不知道该怎么做。谢谢！
编辑：在第二个例子中，短语“SEPTIEMBRE DE 2013.”进入新的一行。但是短语“17 DE“仍然在上面的一行。我想“17 DE SEPTIEMBRE DE 2013.”进入新的一行。明白了吗？

css

来源：https://stackoverflow.com/questions/14465765/how-to-make-a-entire-span-drop-into-a-new-line

6条答案

按热度按时间

j8ag8udp1#

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

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

字符串
Demo

赞(0）回复(0）举报 2024-01-09

r55awzrz2#

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

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

字符串
查看：http://jsfiddle.net/945Df/7/

赞(0）回复(0）举报 2024-01-09

hgncfbus3#

我是这样做到的：

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

字符串

赞(0）回复(0）举报 2024-01-09

mcdcgff04#

.date{display:inline-block;}

字符串
当日期比div长时，它将显示在新的一行上
例如：http://jsfiddle.net/TqRyK/

赞(0）回复(0）举报 2024-01-09

dddzy1tm5#

如果你浮动：，对;，当没有空间容纳整个内容时，它应该落在下一行。
之后，您将需要一个清除元素。

赞(0）回复(0）举报 2024-01-09

pgx2nnw86#

我是通过word-wrap: break word;实现的

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何使整个跨度下降到一个新的线？

6条答案

相关问题

热门标签

最新问答