html中的自动列文本换行

时间:2014-11-18 10:22:11

标签: html css html5 css3 text

有没有办法用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等。

有可能吗?

2 个答案:

答案 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。在实践中,您还需要供应商前缀版本以获得合理的浏览器覆盖率:

&#13;
&#13;
#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;
&#13;
&#13;

该示例使用“文学段落”格式:而不是段落之间的默认垂直间距,除了第一段之外,每个段落的第一行都缩进了一点。在多列渲染中,这比默认的p格式(这反映了办公自动化软件的默认值而不是排版传统)要好得多。

还有许多其他事情需要考虑。通常,双栏文本在双方都合理时通常看起来要好得多。这反过来又使得连字符或多或少成为必需品。