(雲端生活/CSS) 噗浪備份：
「固定導覽區塊並顯示捲軸」後續，「改善出現橫向捲軸的排版問題」
[前續噗-噗浪備份CSS技術]
[相關噗-噗浪話題]

=======背景描述=======
正常的噗浪備份橫向不會超出一頁的空間，沒有橫向捲軸

其中偶有排版出問題的月份，橫向捲軸出現

這些排版有問題的頁面，使用起來非常不方便，除了噗的內容要拉動捲軸才能看完之外，回應數目被推到畫面外，失去了一目了然的俯瞰性，堪稱一大敗筆。

這個排版問題，是噗浪備份本身就存在的問題

原因出自於：某些網址無法正常省略，過長了

雖然整體性較差，便利性不優，但是做為個人噗浪生活的資料搜尋的介面還可以接受。直到前續噗中提到的，用CSS讓噗浪備份「固定導覽的區塊並顯示捲軸」之後，問題之上產生了更嚴重的問題，為了解決嚴重的問題，是這一噗的緣起。

=======問題定義=======
前續噗的預期成果「固定導覽區塊並顯示捲軸」

意外的版面混亂，出現在有舊問題的月份

這幾個月份的資料，雖然導覽的捲軸固定了，但是產生了新問題：噗的內容的起始位置跑到畫面的最左邊，跟導覽的月份疊在一起，看起來一片混亂，也點選不到被疊住的資料。這樣問題可就大了。

=======解決方法一=======
為了解決這個問題，我先從區塊安排上下手，研究了一下頁面HTML原始碼，找出頁面的三大區塊和給定的class

三個區塊：橫幅、導覽和內容，給定的class分別為menu/space、calendar/space和space。

試誤幾次，配合網路查資料，使用以下CSS：
.space{position:absolute;}
//將全部space區塊的position設定為absolute
.calendar{height:500px;position:fixed;overflow-y:scroll;}
//如前續噗說明
.menu{position:static;}
//將menu區塊的position改回預設值

按照前續噗的做法，套用到噗浪備份的qualifiers檔案裡面

問題解決了，噗的內容不會從最左開始疊在月份下面了。雖然嚴重的問題解決了，可是可以接受的老問題還在，總還是有那麼一點芒刺在背的感覺…

=======解決方法二=======
人說打鐵要趁熱、除草要除根，我換個方向，從換行下手，找了網路資料，試了幾次，使用以下CSS：
div{word-break:break-all;}
//將所有區塊的word-break設定成break-all

這樣噗的內容就可以顯示在同一個畫面了，既有俯視感，又不需要額外拉動橫向捲軸看資料，連同舊問題一起解決了(喜)

檢查一下問題根源，現在換行方式是不將連續的英數符號當成一個意義單元，會將其切斷並換行

這結果應該會讓出現在畫面邊界的英文單字總是被拆成兩半，不過我是用中文的，不是英文，而且只是用做個人噗浪生活的資料搜尋介面，應該不會有什麼影響(希望)

=======後話=======
試驗了一下，直接使用解決方法二的CSS應該就可以達到預期的良好版面，不過我還是把解決方法一保留了下來，除了作為一個學習的痕跡－－回憶的引子之外，因為有動用到區塊的配置，將來噗浪備份的使用上如果有遇到意外的狀況，到時候也會是進一步自我學習的緣起。