[CSS3:Word-Break]用CSS來設置中英文的文字斷行樣式

如果要運用CSS來設置文字斷行的規則,對應的語法就是: word-break。  
這個語法很好記憶,語法直接就是語意:文字斷行,  
Word-Break 在用法上,有三個屬性,分別是:Normal、Keep-All、Break-All。  
下面我們分別來聊一下這三種屬性各有哪些不同 ...full story ››

[CSS文字垂直置中]行高(Line-Height)的妙用

當我們在使用CSS語法中的這個Line-Height(行高/行距)這個指令時,  
大多是用來設定一個文字段落中,行與行之間的距離,  
讓每一行文字能有些間距,不至於太過擁擠,不易閱讀。  
 
不過行高/行距(Line-Height)除了設定換行文字的間距外,  
還有一個妙用,  
就是在特定情境下,讓單行文字垂直置中。  
 
什麼意思呢?舉例來說好了,我們在網頁上弄了一個選單列,  
假設這個選單列我們希望他高度能有46px,  
裡面有幾個文字連結,文字大小為12級,  
看起來會像是下面 ...full story ››

[CSS:Justify]讓中英文混搭的文字,左右齊行

有朋友來信問說,  
在他的網頁上,常有中文混搭著英文或者是特殊符號,  
以致於在每一個段落的尾端,總是有點坑坑巴巴的,  
雖不至於有多難看,  
但總是希望能像在 Office Word 中那樣,  
能設定一下左右齊行的文字對齊方式。  
 
其實這個左右齊行的文字對齊功能,  
在CSS的語法裡,是一直都存在的喔,不過似乎較少人使用 ...full story ››

[CSS3:text-overflow]將過多的內文自動刪減為適合的長度

在設計或撰寫網頁內容時,有時候我們不希望某個區塊內的文字太長,導致整個版面顯得雜亂擁擠。  
例如在頁面側邊欄,我們經常會顯示『最新留言』、『最新文章』等等,如果這些文章標題的字數過多,礙於側邊欄的寬度,每一則顯示的文章標題就會自動換行,把整個側邊欄也擠的很長。感覺就會很雜亂 ...full story ››