有没有办法用CSS将 中的两个或更多列文本换行?
我的p
标签的连续文字只有这样:
<div id="needtowrap">
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Nulla ullamcorper diam arcu, ...</p>
<p>In libero diam, facilisis quis urna nec, ...</p>
<p>Sed varius et mi quis dictum. ...</p>
</div>
我想把这个文本分成两列50%的文本,比如Microsoft Word或LibreOffice等。
有可能吗?
答案 0 :(得分:7)
请参阅“列”规则:
http://www.w3schools.com/css/css3_multiple_columns.asp
正如您所看到的,这是一个CSS3规则,因此您可能无法找到完全符合您要求的浏览器支持。
MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
浏览器支持细分: http://caniuse.com/#feat=multicolumn
更多阅读,例子等: http://css-tricks.com/guide-responsive-friendly-css-columns/ (相当全面)
答案 1 :(得分:1)
columns
属性和相关属性的 Multi-column layout in CSS。最简单的是,您只需在columns: 2
元素上设置div
。在实践中,您还需要供应商前缀版本以获得合理的浏览器覆盖率:
#needtowrap {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
#needtowrap p {
margin: 0;
}
#needtowrap p + p {
text-indent: 1em;
}
&#13;
<div id="needtowrap">
<p>Lorem ipsum dolor sit amet, ...
Well we need some real content too.
Otherwise this looks rather dull.</p>
<p>Nulla ullamcorper diam arcu, ...
And some more text to make this look like a paragragh.</p>
<p>In libero diam, facilisis quis urna nec, ...
By the way, fake Latin is not good fill text.
It behaves differently from the texts you will really use.</p>
<p>Sed varius et mi quis dictum. ...
But I digress.</p>
</div>
&#13;
该示例使用“文学段落”格式:而不是段落之间的默认垂直间距,除了第一段之外,每个段落的第一行都缩进了一点。在多列渲染中,这比默认的p
格式(这反映了办公自动化软件的默认值而不是排版传统)要好得多。
还有许多其他事情需要考虑。通常,双栏文本在双方都合理时通常看起来要好得多。这反过来又使得连字符或多或少成为必需品。