如何将段落放在HTML列中?
问题描述:
所以,我有一个页面,看起来像......如何将段落放在HTML列中?
I am a monkey
I am a monkey too, with
additional information.
I am also a monkey
如果我使用-webkit-列包装这个在CSS:2标签,它显示为...
I am a monkey additional information
I am a monkey too, with I am also a monkey
我希望避免在这种情况下分割段落。
我正在寻找像“nobr”或单词包装功能或东西...... eeek。有任何想法吗?
(稍后...)似乎我可以在Firefox中做到这一点,但不是Chrome。嗯...
答
您可以设置
p {
display:inline-block;
}
,这将防止从打破了分栏符段落。可能还会有其他一些奇怪的效果,但首先要好好玩一下。
+0
也许有点晚,但我试过了,它似乎没有做任何事情。 – 2014-01-14 19:27:59
答
尽管问题得到了解答,但由于此问题首次发布,所以浏览器对CSS列的支持要好得多。这个问题在搜索结果中仍然很高,而且在答案中引用的博客文章也很老了。所以这里是快速的答案:保持元素不被列入列的最好方法是使用break-inside属性。例如:
p {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
欲了解更多信息,请参阅this entry on CSS Tricks。
答
试试这个:
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
首先应该处理Chrome/Safari浏览器;第二个Firefox。第三是standards-compliant“正确”的方式。
这听起来像你正在寻找所谓的“寡妇/孤儿”,在排版控制。 – Gabe 2011-05-28 23:37:38
http://*.com/questions/4742418/widow-orphan-control-with-javascript有帮助吗? – Gabe 2011-05-28 23:44:13
帮助不大;它不适用于屏幕。 – jamescridland 2011-05-29 00:12:13