2012年5月31日

CSS text-indent 與 word-spacing 介紹

簡介

本文章簡單的介紹CSS中的兩個在文章排版非常有用的屬性,分別為text-indent(縮進)word-spacing(字距)


text-indent

相信大家小時候或是現在都有寫過作文,而作文在文章的最前頭都必須要縮進二~四格空白,在網頁中,你可以使用text-indent來實作這個功能
,我們來看看下面程式碼
text-indent:50px
<html> <head> <style type="text/css"> p {text-indent:50px;} </style> </head> <body> <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> </body> </html> 


text-indent:150px <html> <head> <style type="text/css"> p {text-indent:50px;} </style> </head> <body> <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> </body> </html> 



word-spacing

word-spaceing表示字與字之間的間隔,word-spacing預設值為0px,該值越大字距越大;如果要讓字與字之間看起來更緊密些,這時候就必須將這個值設為負值。
word-spacing:0px
<html> <head> <style type="text/css"> p { word-spacing:0px; } </style> </head> <body> <p> This is some text. This is some text. </p> </body> </html> 



word-spacing:20px
<html> <head> <style type="text/css"> p { word-spacing:20px; } </style> </head> <body> <p> This is some text. This is some text. </p> </body> </html> 


word-spacing:-2px
<html> <head> <style type="text/css"> p { word-spacing:-2px; } </style> </head> <body> <p> This is some text. This is some text. </p> </body> </html>


結論

本文簡單介紹了css的兩個屬性,這兩個屬性平常可能比較不會用到,但是如果你正在處理雜誌排版(Magz Layout)或是注重文章的排版網站時,在微調上這兩個屬性就會顯得非常的重要了。



















沒有留言:

ShareThis