2011-05-28 75 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