上星期因為超級好友結婚，所以把之前的版面拿出來用(會設計那版面就是來自她的喜訊帶給我的靈感)，隔天即有朋友在留言版反應版面跑掉了！我檢查了一下，原來版面是被「每日一文」的文章標題給撐開了，當時並沒有想到至原始網站改變寬度即可，我只是一股腦地想改CSS的性質。調整了「links」的寬度後，的確解決了版面移位的問題，但改變了版面的比例後，總覺得不是很好看，這下子我又傷腦筋了。
不知道各位朋友是否有遇到，常常需要在「版面的完整性」及「小工具」間做選擇，像我就得常常面臨到。因為我自己偏愛小版面，所以圖片的大小、小工具的寬度，都是每次我要注意的地方。為了版面的完整性，我寧願捨棄小工具不用，但在難以割捨的情況下總有兩全的辦法吧！？
於是我在網路上搜尋資料，終於被我找到答案囉。
我在「links」裡加上：
word-wrap: break-word; /* 視窗邊界換行--僅 IE 支援*/
例： #links {
width:200px;
word-wrap: break-word;
}
也可用：
word-break: break-all; /*視窗邊界換行，但不會保持英文單字的完整性*/
這麼一來，連結列只要有過長的程式碼的部份都會乖乖地換行。這不但解決了外掛小工具程式碼將版面撐開的難題，也同時解決了無名「最新的引用 」讓版面移位的問題。
正所謂「不經一事、不長一智」，很高興我學到了，也樂與大家分享^^
不知道各位朋友是否有遇到，常常需要在「版面的完整性」及「小工具」間做選擇，像我就得常常面臨到。因為我自己偏愛小版面，所以圖片的大小、小工具的寬度，都是每次我要注意的地方。為了版面的完整性，我寧願捨棄小工具不用，但在難以割捨的情況下總有兩全的辦法吧！？
於是我在網路上搜尋資料，終於被我找到答案囉。
我在「links」裡加上：
word-wrap: break-word; /* 視窗邊界換行--僅 IE 支援*/
例： #links {
width:200px;
word-wrap: break-word;
}
也可用：
word-break: break-all; /*視窗邊界換行，但不會保持英文單字的完整性*/
這麼一來，連結列只要有過長的程式碼的部份都會乖乖地換行。這不但解決了外掛小工具程式碼將版面撐開的難題，也同時解決了無名「最新的引用 」讓版面移位的問題。
正所謂「不經一事、不長一智」，很高興我學到了，也樂與大家分享^^
請先 登入 以發表留言。