问题如何在HTML列中保留段落？

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

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

如果我用CSS将它包装在CSS中 -webkit柱：2 标签，显示为......

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

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

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

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

12302

2018-05-28 23:20

起源

听起来你正在寻找排版中所谓的“寡妇/孤儿”控制。 - Gabe

是否 stackoverflow.com/questions/4742418/... 帮帮我？ - Gabe

没有太多帮助;它不适用于屏幕。 - jamescridland

你所谈论的是其中的一部分 CSS多列布局，特别是在该部分列断裂。不幸的是，目前对这些功能的支持似乎很糟糕。以下是对此效果的一些分析： zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns

非常有用的博文。非常感谢。 - jamescridland

尝试这个：

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

第一个应该处理Chrome / Safari;第二个Firefox。第三是符合标准 “正确”的方式。

2018-02-13 15:16

你可以设置

p {
  display:inline-block;
}

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

2017-09-05 13:18

也许有点晚了，但我试过这个，似乎没有做任何事情。 - Mr Lister

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

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

有关详细信息，请参阅关于CSS技巧的这篇文章。

2017-10-23 14:55

使用带有隐形边框的表怎么样？也许这可能会成功。

-1

2018-05-31 20:00

我们即将忘记基于表格的设计。拥抱语义网！ - Zso

问题 如何在HTML列中保留段落？