将Div内容拆分为两行

Question

我有一个div如下

<div class="info">Some small information not more than 6 small words. <a href="#" title="Title1">title1</a> | <a href="#" title="title2">Title2</a> | <a href="#" title="title3">Title3</a> | <a href="" title="title4">Title4</a></div>

我希望最终的输出应该是

一些小信息不超过6个小字.

Title1 | Title2 | Title3 | TITLE4

文本应位于第一行,超链接应位于第二行.任何方式在CSS/CSS3中做到这一点,而不在其间添加任何额外的标签.提前致谢.

Answer 1

正如评论者所说,最好是改变HTML代码本身.但如果你不能,也许这样的事情会有所帮助:

.info { white-space:pre; }
.info a:first-of-type:before { content: '\A'; }