css - 将 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个小字。

标题1 | 标题2 | 标题3 | 标题4

文本应该在第一行，超链接应该在第二行。任何在 CSS/CSS3 中执行此操作的方法，而无需在两者之间放置任何额外的标签。提前致谢。

Answer 1

正如评论者所说，最好能更改 HTML 代码本身。但如果你不能，也许这样的事情会有所帮助：

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