2011-05-28 62 views
10

所以,我有一个页面,看起来像......如何将段落放在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。嗯...

+1

这听起来像你正在寻找所谓的“寡妇/孤儿”,在排版控制。 – Gabe 2011-05-28 23:37:38

+1

http://stackoverflow.com/questions/4742418/widow-orphan-control-with-javascript有帮助吗? – Gabe 2011-05-28 23:44:13

+1

帮助不大;它不适用于屏幕。 – jamescridland 2011-05-29 00:12:13

回答

-1

如何使用具有不可见边框的表格?也许这可能会诀窍。

+0

我们即将忘记基于表格的设计。拥抱语义网络! – Zso 2016-12-28 14:50:44

4

您可以设置

p { 
    display:inline-block; 
} 

,这将防止从打破了分栏符段落。可能还会有其他一些奇怪的效果,但首先要好好玩一下。

+0

也许有点晚,但我试过了,它似乎没有做任何事情。 – 2014-01-14 19:27:59

1

尽管问题得到了解答,但由于此问题首次发布,所以浏览器对CSS列的支持要好得多。这个问题在搜索结果中仍然很高,而且在答案中引用的博客文章也很老了。所以这里是快速的答案:保持元素不被列入列的最好方法是使用break-inside属性。例如:

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

欲了解更多信息,请参阅this entry on CSS Tricks