如何在HTML列中保留段落？

Question

所以，我有一个看起来像......的页面。

I am a monkey
I am a monkey too, with
additional information.
I am also a monkey

如果我使用 -webkit-columns：2 标记将其包装在CSS中，则显示为...

I am a monkey               additional information
I am a monkey too, with     I am also a monkey

我希望避免在这种情况下拆分段落。

我正在寻找类似“nobr”或自动换行功能的东西...... eeek。有什么想法吗？

（稍后......）似乎我可以在Firefox中执行此操作，但不能使用Chrome。嗯...

Answer 1

试试这个：

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;

第一个应该处理Chrome / Safari;第二个Firefox。第三种是standards-compliant“正确”的方式。

H / t https://stackoverflow.com/a/7785711/1431728

Answer 2

您可以设置

p {
  display:inline-block;
}

将阻止这些段落突破列中断。可能会有一些其他奇怪的效果，所以首先要有一个很好的发挥。

Answer 3

虽然问题已得到解答，但自从这个问题首次发布以来，浏览器对CSS列的支持要好得多。搜索结果中的问题仍然很高，答案中引用的博客文章也很老。所以这里的答案很简单：保持元素不分成列的最好方法是使用break-inside属性。例如：

p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

有关详细信息，请参阅this entry on CSS Tricks。

Answer 4

如何使用带有隐形边框的表格？也许这可能会成功。