自动换行HTML中的列文本

Question

在HTML中，是否有仅使用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等软件中一样。

这是可能的吗？

- netdjw

---

你的解释对我来说不够清晰。这是你想要的吗？fiddle - Mr_Green

你在谷歌上搜索过“CSS列”吗？这会出现以下结果：https://developer.mozilla.org/en-US/docs/Web/CSS/columns。 - user663031

Answer 1

请看“列”规则：

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/ (相当全面)

- user1187347

---

已注意！（添加了更多参考答案） - user1187347

Answer 2

使用CSS的多列布局和相关属性的columns属性在现代浏览器中得到了很好的支持。最简单的情况下，您只需要在div元素上设置columns: 2即可。实际应用中，您还需要合理地覆盖浏览器，使用供应商前缀版本。 了解更多

#needtowrap {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}
#needtowrap p {
  margin: 0;
}
#needtowrap p + p {
  text-indent: 1em;
}

<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>

该示例使用“文学段落”格式：除了第一个段落外，每个段落的第一行都会略微缩进，而不是默认段落之间垂直间距。在多列渲染中，这比默认的p格式要好得多（后者反映了办公自动化软件的默认设置，而不是印刷传统）。还有许多其他需要考虑的事情。通常情况下，双侧对齐的多列文本看起来更加美观。这反过来使得断字成为必须。

- Jukka K. Korpela