水平流文本

衆所周知，無論您是否有固定的高度，文本都會從上到下，除非您將溢出隱藏。我想知道是否有辦法讓文本從垂直變爲水平。就像在一個大屏幕上打開一個大的MS詞一樣，你可以看到左側的第一頁和右側的第二頁。我想在我計劃的網站上實現同樣的效果。水平流文本

謝謝。

來源

2012-10-12 Mr A

瀏覽此頁面http://www.html5rocks.com/en/tutorials/flexbox/quick/約一半，一看。 – xception

CSS區可以在這裏是一個很大的幫助，但今天，他們正在進行的工作，很少有瀏覽器的支持。

但你可能用的是column-count和column-gap

這裏是一個小提琴我掀起了：http://jsfiddle.net/MadLittleMods/wpTX7/

下面是一些CSS給它的200像素高度範圍內水平拆分成多列。

#overflow_horizontal 
{ 
    height: 200px; 
    overflow: scroll; 

    -moz-column-count: 2; 
    -moz-column-gap: 24px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 24px; 
    column-count: 2; 
    column-gap: 24px; 
}

編輯：

這裏是一個備用。 jsFiddle：http://jsfiddle.net/MadLittleMods/SEDaQ/

小提琴的工作，但不是在IE9上，因爲它不喜歡文本/純文本資源。如果你能給我一個Columnizer的靜態鏈接，我可以更新小提琴，它會工作得很好。

添加Modernizr和Columnizer。

加入這個jQuery（改變＃列，無論你需要）：

$('.no-csscolumns > #overflow_horizontal').columnize({ 
    columns: 3 
});

來源

2012-10-12 02:16:10 MLM

至少在IE9中工作嗎？ –

@MrA現在正在處理jQuery後備... – MLM

如果可用，我應該使用哪種回退的任何建議？ –

1。插入 - >分隔符 - >分節符（下一頁分節符）。

2。文件 - >頁面設置 - >設置橫向

來源

2012-10-12 02:15:41

我是指網頁。感謝你的思想。 –

我不知道你爲什麼要這樣做，它聽起來不像一個功能的網頁，但如果你只是設置元素寬度說，10000px和溢出到自動，你將能夠讓文字跑出屏幕的一側。

http://jsfiddle.net/NHD2e/

這裏還有一個問題：Continuing overflowed text in a different div?

來源

2012-10-12 02:15:56

我正在尋找Windows 8的感覺，或類似於新的MySpace方法，但不是那麼極端。 –

這很有道理。您也可以使用一組div並將它們全部浮動到左側，每當您想要開車時都清除浮動，請參閱此處的第9步：http://www.barelyfitz.com/screencast/html-training/css/定位/ –

回答

相關問題